Question

我正在使用jQuery的animate（）函数以及从jQuery UI插件中缓动到使用侧边栏中的链接向下滚动页面的动画。我也用它来操作“返回顶部”按钮。你可以在这里看到它：http://www.element17.com/

回到顶部按钮工作正常，但链接的行为不稳定。有时候它运行得很好，有时它要么拒绝滚动，要么等待一两秒然后滚动，要么根本没有动画，只是跳到页面就好像它们首先没有编写脚本一样。

以下是回到顶部按钮的代码：

$('#go_up').click(function(){
  $('#main').animate({scrollTop:0}, 2000, 'easeOutExpo');
});

这是链接的代码：

$('.scroll').click(function(){
  $('#main').animate({scrollTop:$(this.hash).offset().top}, 3000, 'easeOutExpo');
});

我已经在OSX和Windows的Chrome中对此进行了测试，两者的行为都不稳定。任何人都可以建议为什么会出现这种情况？

Answer 1

首先，您需要阻止哈希链接（return false）的默认行为，并且您还需要检查是否存在具有给定ID的元素。

$('a[href*=#]').on('click', function() {
    var hash = $(this.hash).offset();
    if (hash) {
        $('#main').stop().animate({
            scrollTop: hash.top
        }, 3000, 'easeOutExpo');
        return false;
    }
});

<强>更新将您的链接和ID更改为有效的链接：

#EN％20FLEURS - ＆gt; #EN_FLEURS
#WWPW％202011 - ＆gt; ＃WWPW_2011
＃MUSEÉ％20DU％20LOUVRE - ＆gt; #MUSEE_DU_LOUVRE
＃FAIRYTALE％20ROAD - ＆gt; #FAIRYTALE_ROAD

顺便说一下

如果不需要（例如在页面顶部）隐藏滚动到顶部链接，请使用：

$(window).scroll(function () {
    if ($(this).scrollTop() !== 0) {
        $('#go_up').fadeOut();
    } else {
        $('#go_up').fadeIn();
    }
});

用css隐藏它：

#go_up {display:none}

Answer 2

您的$(this.hash).offset().top并不总是提供您期望的值，即从#main div的顶部提供。如果您滚动到页面底部并点击底部的链接，它的offset().top将在屏幕上相对，而不是绝对的。例如，可能是负值。但是，animate的scrollTop需要绝对滚动位置。

可以做一个解决方案

$('#main').animate({scrollTop:
       $(this.hash).offset().top - $('#CONSTRUCTS').offset().top},
   3000, 'easeOutExpo');

其中#CONSTRUCTS将作为最顶层的元素。

根据您的数据的动态程度，您可能希望将其替换为#main左上角的任何内容。

还有很多其他方法可以解决它。

来自jQuery Animate的奇怪行为

2 个答案: