1

scrollTop 関数を使用して視差スクロール Web サイトを作成し、scrollTop 関数を Web サイト全体のさまざまなアンカーにバインドしています。

私が抱えている問題は、スクロールがChromeでは非常に途切れたりぎくしゃくしたりすることですが、Firefoxでは何とかうまくいきます。

私のコードは次のとおりです。

 $('.recipes').click(function(){
 $('html,body').animate({
 scrollTop: $(".main1").offset().top
 }, 1500);
 });

 $('.cooking').click(function(){
 $('html,body').animate({
 scrollTop: $(".main2").offset().top
 }, 1500);
 });

ウェブサイトのスクロールがぎくしゃくしないように、これを行う別の方法はありますか? 多分私が追加できるイージング関数？

  • 編集-

次の関数を削除すると、ジャーキーがなくなるように見えますが、コードに何か問題があるのでしょうか、それとも別の書き方でしょうか?

var startY = $('#container').position().top + $('#container').outerHeight();

$(window).scroll(function(){
checkY();
});

function checkY(){
if( $(window).scrollTop() > startY ){
    $('#backToTop, #navigation').fadeIn(600);
}else{
    $('#backToTop, #navigation').fadeOut(600);
}
}

checkY();

2回目の編集

$(document).ready(function(){

$('.recipes').click(function(){
    $.scrollTo('.main1', 1500)
 });

$('.cooking').click(function(){
    $.scrollTo('.main2', 1500)
});

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            $('#backToTop, #navigation').show();
        } else {
            $('#backToTop, #navigation').hide();
        }
    });
    }); 

});
4

2 に答える 2

1

.scroll()ページが少しスクロールするたびに起動されるフェード関数をで実行する代わりに、スクロールが完了したときに1回だけトリガーされる.animate()コールバックで実行します。

$('.recipes').click(function(){
     var startY = $('#container').position().top + $('#container').outerHeight();
     $('html,body').animate(
          { scrollTop: $(".main1").offset().top },
          1500,
          function() {
             checkY(startY);
          } 
     );
});

$('.cooking').click(function(){
     var startY = $('#container').position().top + $('#container').outerHeight();
     $('html,body').animate(
         { scrollTop: $(".main2").offset().top },
         1500,
         function(){
             checkY(startY);
         }
     );
});

そして、OPの元のcheckY()機能：

function checkY(i) {
    if( $(window).scrollTop() > i ) {
        $('#backToTop, #navigation').fadeIn(600);
    } else {
        $('#backToTop, #navigation').fadeOut(600);
    }
}
于 2012-11-04T22:33:19.890 に答える
1

プラグインを使用して代替アプローチを受け入れる場合、jQuery scrollToは、私が使用したときは常に非常にスムーズでした。

これにより、次のことが可能になります

$('.recipes').click(function(){
    $.scrollTo('.main1', 1500);
});
于 2012-11-04T21:47:16.183 に答える