jQuery 动画滚动到锚点不起作用？

Question

我以为我已经解决了这个问题，但事实证明我没有。基本上构建一个 tumblr 主题，我的代码中的某些内容与 jquery 动画滚动到顶部相冲突。我试过删除一些东西，因为我不完全确定它可能是什么，并且认为它对其他人来说可能真的很明显？

这是一个指向我的主题 http://minori-theme.tumblr.com/ 的链接和一个我正在关注的 jsfiddle，以便为平滑滚动设置动画 http://jsfiddle.net/YtJcL/1008/

我正在使用的代码如下，我只是使用标准的链接和 id，它们链接正常，因为它到达了正确的点，只是滚动不流畅。

$(document).ready(function() {
var hashTagActive = "";
$(".scroll").click(function (event) {
    if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
        event.preventDefault();
        //calculate destination place
        var dest = 0;
        if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
        } else {
            dest = $(this.hash).offset().top;
        }
        //go to destination
        $('html,body').animate({
            scrollTop: dest
        }, 2000, 'swing');
        hashTagActive = this.hash;
    }
});
});

编辑：如果有人有更简单的选择，我愿意接受建议吗？

Answer 1

如果您不添加easing libary，您的animate 函数上的缓动效果将不起作用。 jQuery 核心没有缓动功能。

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></s‌​cript>

您还可以根据元素的偏移顶部值定义动画时间的动态值。这将使您的动画根据当前值更加流畅。

Here is jsFiddle with smooth scrolling effect.

 $(".scroll").click(function(event){
         event.preventDefault();

         var dest = 0;
         var $target = $(this.hash);
         var targetTop = $target.offset().top;
         var remainTop = $(document).height() - $(window).height();

         if( targetTop > remainTop){
              dest = remainTop;
         }else{
              dest = targetTop;
         }

         // Dynamic value for timing
         var dur = dest*1.2;

         $('html,body').animate({scrollTop:dest}, dur,'easeInOutCubic');

});

最后一点，你应该使用变量来组织你的代码，你的这些编码很难阅读和维护。

Answer 2

卷轴第一次起作用，但之后的任何时候都不起作用。检查所有习惯于查看是否保留某些内容的 var。

编辑： 线

if(hashTagActive != this.hash)

如果您已经单击“返回顶部”，则不会打扰 jquery 动画，因为 hashTagActive 已经是#top。这就是为什么它工作一次但不是两次的原因。

编辑 2： 查看This fiddle 了解解决方法