0

一連の繰り返し機能を変更することで DRY の原則に従おうとしていますが、ここで立ち往生しています。このスクロールを、異なるクラスとIDで 4 回繰り返される関数に変更して、より一般的な方法に変更したいと考えています(私はjQueryを使用しています)。

  $('.empresa').click(function(event){
    $('html, body').animate({
        scrollTop: $("#empresa").offset().top
    }, 500);
    return false;
  });
  $('.nosotros').click(function(event){
    $('html, body').animate({
        scrollTop: $("#nosotros").offset().top
    }, 500);
    return false;
  });

クラスは、このような ul 内のナビゲーションの要素です。

<ul class="nav">
    <li><a href="index#nosotros" class="nosotros">Link to the anchor</a></li>
    <li><a href="index#empresa" class="empresa">Link to the anchor</a></li>
</ul>

タグへのスクロールは、このタグを持つ div 要素です。

<div class="some-random-class" id="empresa" name="empresa">
<div class="some-random-class" id="nosotros" name="nosotros">

この新しいセレクターを使用して、適切なアンカーでリストのクラスを取得していましたが、関数のスクロール部分に問題があります。抽出されたオブジェクトのクラスまたは名前を使用/変換する方法がわかりません以前と同じ方法で使用できるようにします。

$('.nav li').children('a').click(function() {
    alert( $(this).attr('class') );
});

皆さんが私を助けてくれることを願っています!

4

2 に答える 2

2 
$('.nav > li > a').click(function(e){
    e.preventDefault();
    $('html,body').animate({
       scrollTop: $('#'+$(this).prop('class')).offset().top
    });
});
于 2013-07-06T19:26:32.590 に答える
0

以下も使用できます。

$('.fluidJump').on('click', function(event) {
    event.preventDefault();
    var offset = $($(this).attr('href')).offset().top;
    $('html, body').animate({scrollTop:offset}, 500);
});

ハイパーリンクに「fluidJump」クラスを追加して、アニメーションでそのセクションに移動します。(数値)

<a href="#sectionid">Go to section</a>
于 2013-07-06T19:46:27.847 に答える