html5锚点平滑,使用锚点定位不改变url同时平滑的滑动到锚点位置，不会生硬的直接到锚点位置...

使用锚点定位不改变url同时平滑的滑动到锚点位置，不会生硬的直接到锚点位置

对前端来说锚点是一个很好用的技术，它能快速定位到预先埋好的位置。

但是美中不足的是它会改变请求地址url，当用户使用了锚点的时候锚点的名称会被添加到url的最后面。

就像这样：

此时如果用户刷新页面便会报错或者显示不出来刷新前的页面，

同时点击锚点时是非常生硬的直接跳转到锚点位置，没有任何过渡效果

我今天做项目的时候也算是钻研出来了！！！

使用锚点时不会改变url请求地址，同时还很平滑的滑动到锚点的位置

话不多说，直接上代码

网上的方法JS为

clickanchor(idName) {

document.querySelector(idName).scrollIntoView(true);

}

querySelector用于选择元素，具体可看文档  HTML DOM querySelector() 方法

element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内

这样的确是可以使用锚点定位而且也不会改变url，

但是还是没有过渡效果，非常的生硬

介绍CSS的新属性   behavior: "smooth"用于平滑滚动

当在JS里面使用了这个元素时，便可以非常平滑的过渡到锚点位置

方法为：

clickanchor(idName) {

document.querySelector(idName).scrollIntoView({ behavior:"smooth"});

}

这样使用锚点真的太舒服了，是不是对锚点的喜欢又更上一层楼了【奸笑】

完~

原文：https://www.cnblogs.com/mlw1814011067/p/13039136.html