11

アンカータグを介してセクションに分割された単一ページのWebサイトを構築しています。ナビゲーションリンクをクリックすると、セクションにスムーズにスクロールします(資金調達領域と私たちについてのみ完了しています)が、リンクをクリックすると、約50%の時間、スムーズにスクロールして前に点滅する背景画像のように見えますjQueryは上下にスクロールします。

私には、HTMLがすぐにアンカーに移動しようとしているように見えるため、点滅しますが、jQueryは、長押しして、ゆっくりスクロールする必要があると言います。

これを解決する方法がわかりません。

jQuery:

// SlowScroll Funding Areas
$(document).ready(function(){

// 'slowScrollTop' is the amount of pixels #teamslowScroll
// is from the top of the document

    var slowScrollFunding = $('#funding-areas').offset().top;

// When #anchor-aboutus is clicked

    $('#anchor-funding-areas').click(function(){
        // Scroll down to 'slowScrollTop'
        $('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000);
    });
});

// SlowScroll About Us
$(document).ready(function(){
// 'slowScrollTop' is the amount of pixels #slowScrollTop
// is from the top of the document

    var slowScrollTop = $('#about-us').offset().top + 446;

// When #anchor-aboutus is clicked

$('#anchor-aboutus').click(function(){
    // Scroll down to 'slowScrollTop'
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000);
});
});

ありとあらゆる提案に感謝します。

4

2 に答える 2

10

event.preventDefault();クリック機能の後に追加してみてください。

これにより、リンクが想定されていることを実行できなくなり(すぐにアンカーにジャンプ)、競合状態が防止されます。

于 2014-04-11T06:29:47.850 に答える
5
$('#anchor-aboutus').click(function(){
  // Scroll down to 'slowScrollTop'
  $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000);
  event.preventDefault();
  event.stopPropagation();
});

またはさらにクリーン:

$('#anchor-aboutus').click(function(){
  // Scroll down to 'slowScrollTop'
  $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000);
  return false;
});

理由は次のとおりです。

于 2016-06-02T23:28:41.890 に答える