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

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

popstate_详解HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
java三次指数平滑_时间序列挖掘-预测算法-三次指数平滑法(Holt-Winters)
所有移动平均法都存在很多问题. 它们都太难计算了.每个点的计算都让你绞尽脑汁.而且也不能通过之前的计算结果推算出加权移动平均值. 移动平均值永远不可能应用于现有的数据集边缘的数据,因为它们的窗口宽度是 ...
python 曲线平滑处理——方法总结(Savitzky-Golay 滤波器、make_interp_spline插值法和convolve滑动平均滤波)
文章目录 1 插值法对曲线平滑处理 1.1 插值法的常见实现方法 1.2 拟合和插值的区别 1.3 代码实例 2 Savitzky-Golay 滤波器实现曲线平滑 2.1 问题描述 2.2 Savit ...
二次曲线指数平滑怎么用计算机运行,利用Excel进行指数平滑解析(2).doc
利用Excel进行指数平滑分析与预测(2) [例]连续10年的灌溉面积. 第一步,录入数据(图1). 图1 原始数据第二步,选项设置. 沿着主菜单的"工具(T)→数据分析(D)" ...
html语言如何设计锚点,网页html中锚点（描点）定位或书签跳转的实现方法 |
如果你在网页中想点击一个链接进入到这个网页同个页面的某个位置,或者是不同页面的某个位置,怎么办呢? 嘿嘿,这里就教大家一个方法,网页html中锚点(描点)定位或书签跳转的实现方法. >>& ...
vue中使用类似html中a标签的锚链接，实现点击定位到当前页面的某个位置
在vue中实现点击文字,定位到当前页面的某个位置,具体实现效果如下图所示: 主要实现方式为: <div @click="toJump1">定位1</div> ...
锚点链接点击锚点后不改变url的方法
前端当中html锚点链接的用法很简单,相信大家都会: <a href="#top">点击我</a> <div id="top"&g ...
html5 geolocation 百度地图,html5 geolocation配合百度地图api实现定位
1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用 ...
html5边框顶格,CSS 三种定位方式以及格式化上下文详解》 html5jscss
常规流( Normal flow ) 之称之为常规流,是因为这是相对于后面的浮动和绝对定位的一个概念,浮动和绝对定位元素都脱离了当前的常规流. 在 CSS2.1中,常规流包括块框( block box ...

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

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

最新文章

热门文章