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

 

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

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

就像这样：

 

 

 

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

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

 

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

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

话不多说，直接上代码

<!-- 先定好几个用于点击的锚点 -->

<a @click="clickanchor('#item0')"></a>
<a @click="clickanchor('#item1')"></a>
<a @click="clickanchor('#item2')"></a>
<a @click="clickanchor('#item3')"></a>
<a @click="clickanchor('#item4')"></a>
<a @click="clickanchor('#item5')"></a>


<div id="item0"></div>

网上的方法JS为

clickanchor(idName) {
   document.querySelector(idName).scrollIntoView(true);
}

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

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

 

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

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

 

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

同时这个新属性还有其他几个属性  behavior : " smooth "

 

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

方法为：

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

 

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

 

完~