2

ここにある例を使用して、私は同じ実装を試みています。ナビゲーションリンクをクリックすると、スライド/スクロールする代わりに、選択したdivにジャンプします。

HTML：

ナビゲーション

<div class="span3">
        <a href="#about-me"><img class="img-circle" src="http://placehold.it/200x200/e36b23/fff/&text=About+Me+"></a>
</div>

DIV

<div class="row-fluid" id="about-me"> ... </div>

JS：

<script>
$(document).ready(function(){

    $('nav ul li a').click(function(){
        var el = $(this).attr('href');
        var elWrapped = $(el);

        scrollToDiv(elWrapped,40);

        return false;
    });

    function scrollToDiv(element, navheight){
        var offset = element.offset();
        var offsetTop = offset.top;
        var totalScroll = offsetTop - navheight;

        $('body,html').animate({
            scrollTop: totalScroll
        }, 1000);
    }
});
</script>

つまり、「クリックされた」divに到達しますが、スライドアニメーションでは到達しません。これが私が望むものです。誰かアイデアはありますか？

4

2 に答える 2

1

アンカー ポイントに直接移動 (「ジャンプ」) するデフォルトの動作を妨げません。だからここに行く：

$('nav ul li a').click(function(evt){
  evt.preventDefault();
  ...
});
于 2012-11-07T12:58:23.580 に答える
1

htmlクラスに一致するようにjQueryセレクターを調整する必要があります-引用された例が使用するのと同じul/を使用していません。li

$('.span3 a').click(function(){

フィドルについては、こちらを参照してください。

于 2012-11-07T13:54:32.060 に答える