jquery - 我的页面如何通过平滑滚动向下滚动

Question

我使用脚本平滑滚动我的页面，但脚本不起作用我很困惑我错在哪里请帮助我

我的脚本是：

$(".scroll").click(function(event){
     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}, 1000,'swing');
 });

我在锚标记中使用了 .scroll 这种类型：

<a class="scroll" href="#bot">Click here</a>

请帮我！

Answer 1

为了平滑滚动，我建议使用这个：

（根据我在 github 上找到的脚本稍作修改 - 虽然我不记得原作者 - 从我的一个项目中获取）

jQuery.fn.anchorAnimate = function(settings) {

settings = jQuery.extend({
        speed : 1100
}, settings);

return this.each(function(){
    var caller = this
    $(caller).click(function (event) {
        event.preventDefault()
        var locationHref = window.location.href
        var elementClick = $(caller).attr("href")

        var destination = $(elementClick).offset().top;
        $("html:not(:animated),body:not(:animated)").animate({
            scrollTop: destination
        }, settings.speed, function() {
                window.location.hash = elementClick
        });
        return false;
    })
})
}

然后像这样调用它：

jQuery(document).ready(function($) {

    $(".menu li a").anchorAnimate({
        speed: 600
    });

});