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

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

 

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

但是美中不足的是它会改变请求地址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" });
}

 

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

 

完~

 

 

 

 

 

 

上一篇:javascript实例解释分析常用选择器


下一篇:JWT实战:使用axios+PHP实现登录认证