给锚点a标签添加滑动效果

a标签是前端必用之一，但是a标签点击后马上跳到了href属性值处，有时候要达到滑动效果就要自己添加JavaScript

普通的a标签代码写好之后，在js脚本内加上

$("a").click(function () {

    $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);

    return false;//不要这句会有点卡顿

});

（注意：$表达式需要引用jQuery的js文件才能生效！！！！）

其中offset() 方法返回或设置匹配元素的left或者top的页面偏移量（getBoundingClientRect()放回当前窗口的偏移量），具体用法可以到W3School或菜鸟教程看看;

 

$(this).attr("href")是获取你所点击的a标签里面的href属性值。

 

$($(this).attr("href")).offset().top 是获取id等于$(this).attr("href")块所在的位置，比如点击<a href="a1">时，就会获取到id="a1" 的块的位置，这里的-20只是让滑动到的块下移20px，使其更加靠近屏幕中间，让a标签跟加好用。

 

scrollTop是滑动动作，比如scrollTop: 50px 就是滑动到html距离顶部的50px高处。

 

animate是动作函数，提供scrollTop等动作，500则是指animate所提供的动作在500毫秒内完成，这里就是指滑动0.5秒。

 

$("a").click(function (){ }）指a标签被点击是触发{ } 内的事件，所以也可以把a标签改成自定义标签，然后就可以实现一个页面既有普通a标签，也有可以滑动的标签。

 

转载自：https://blog.csdn.net/never_tears/article/details/53377123