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)

如果您已经点击了＆＃34;

将不会打扰jquery动画;返回顶部＆＃34;因为hashTagActive已经是#top。这就是为什么它工作一次但不是两次。

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

jQuery动画滚动锚不工作？

2 个答案: