1

我正在使用 scrollTop 函数创建视差滚动网站，将 scrollTop 函数绑定到整个网站的不同锚点。

我遇到的问题是滚动在 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();

第二次编辑

$(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

如果您愿意使用另一种方法，使用插件，jQuery scrollTo在我使用它时一直非常流畅。

这会让你做

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

.scroll()不要在每次页面滚动一点点时触发你的淡入淡出函数，而是在.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 回答