jQuery：锚点滚动跳跃

我正在使用一些来自www.css-tricks.com的代码，可用于为本地滚动页面锚点设置动画。以下是代码片段：jQuery：锚点滚动跳跃

$("class-name-here").on("click", function() { 
    var $target = $(this.hash); 
    $target = $target.length && $target 
    || $('[name=' + this.hash.slice(1) +']'); 
    if ($target.length) { 
     var targetOffset = $target.offset().top; 
     $('html,body') 
     .animate({scrollTop: targetOffset}, 1500, "easeOutQuint"); 
    return false; 
    } 
});

我一直利用各种时间的动画时间尝试过，但是当我点击链接时，页面不正确地滚动，但滚动到达目的地后，动画继续。 换句话说，它会滚动，但在动画似乎完成后，如果您尝试手动滚动，则页面会再次为该位置自动生成约半秒的动画。

这段代码有什么问题/有没有人看过这个？

来源

2015-11-12 Jeremy Thomas

尽量减少时间的动画。 1.5秒的时间太长，如果尝试从这里滚动出来时没有结束，则动画会尝试完成，因为您处于每个时刻的位置。所以尝试使用'animate（{scrollTop：targetOffset}，250，“easeOutQuint”）;' –

尝试'slow'而不是1500.我认为slow是获得平滑动画的最佳数量。 – tR4xX

我发现了一个例子，我们停在不同类型的事件的滚动事件。我为你做了一个例子，而不使用jquery-ui。滚动定时器设置为2.5秒，这样就可以达到其目标之前随时停止：JS-FIDDLE

function goTo(sectionID) { 

    var page = $("html, body"); 
    page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
    }); 

    page.animate({ scrollTop: $("#section" + sectionID).offset().top }, 2500, 'swing', function(){ 
     page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); 
    }); 

    return false; 
};

来源

2015-11-12 15:37:12

工程就像一个魅力！谢谢 –

你可以试试这个：

$('.your-class-name-here').click(function(event) { 
     var id = $(this).attr("href"); 
     var offset = 10; 
     var target = $(id).offset().top - offset; 
     $('html, body').animate({scrollTop:target}, 1000); 
     event.preventDefault(); 
    });  

});

来源

2015-11-12 15:10:29 undefinedtoken

回答

相关问题