锚链接加动画

  <!--html-->
<div id="top" name="top" style="height:3000px;"></div>
<a href="#top">回顶部</a>   <!--  设置锚链接跳转地方的id  -->
复制代码

方法一

$('a').click(function(){
    $('html, body').animate({
        <!--scrollTop: $( $.attr(this, 'href') ).offset().top-->
        scrollTop: $($(this).attr("href")).offset().top
    }, 500);
    return false;
});
复制代码

延伸

    $(document).on('click', 'a', function(event){
        event.preventDefault();  //  阻止默认事件发生
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
    });
复制代码

方法二

$('a').click(function(){
        $(document).animate({
                  /* 点击对象的锚链接*/
            scrollTop:$(this.hash).offset().top
        },500)
        return false;
    })
复制代码

如果你的目标元素没有ID，也可以用设置name来链接：

    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
        }, 500);
        return false;
    });
复制代码

为了提高性能，应该缓存该$(‘html,body’)选择器，以便每次单击锚点时都不会运行：

    var $root = $('html, body');
    $('a').click(function() {
        $root.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });
复制代码

如果要更新链接地址URL，在animate回调中执行即可

    var $root = $('html, body');
    $('a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });
复制代码

转载于:https://juejin.im/post/5cf0ebbef265da1b5f263c23