0

我将 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 中对此进行了测试，但两者的行为都不稳定。谁能建议为什么会这样？

4

2 回答 2

2

首先，您需要防止哈希链接 ( 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 -> #EN_FLEURS
  • #WWPW%202011 -> #WWPW_2011
  • #MUSEÉ%20DU%20LOUVRE -> #MUSEE_DU_LOUVRE
  • #FAIRYTALE%20ROAD -> #FAIRYTALE_ROAD

顺便一提

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

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

用css隐藏它：

#go_up {display:none}
于 2012-09-15T00:25:28.223 回答
1

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

一种解决方案可能是

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

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

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

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

于 2012-09-15T00:16:30.297 回答