js 实现锚点跳转示例解析
更新时间：2023年07月19日 11:27:46 作者：fuGUI
这篇文章主要为大家介绍了js实现锚点跳转示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
背景
由于使用wujie微前端集成子应用，子应用里面的某个页面内部是用a标签做锚点跳转的，集成之后，锚点跳转就失效了
问题排查
找到原因是因为点击a标签跳转后，会将#锚点直接拼接在了主应用的url上面了，导致子应用不识别，获取不到，所以跳转失效，所以这种跳转方式就行不通，下面介绍一种通过js实现锚点跳转
具体实现
通过scrollIntoView方法实现锚点跳转，用法实例
let element = document.getElementById("anchor");
//获取到元素，然后使用scrollIntoView()方法就可以滚动到element元素所在位置
element.scrollIntoView(); 不显示声明任何参数，相当于是element.scrollIntoView(true)
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});参数解析
可选参数为Boolean或者更为详细的Object
当参数为Boolean值的时候
如果为true，选中的元素会与可视区域最上端平齐（在滚动条可动范围内）（默认）
如果为false，选中的元素会与可视区域最下端齐平（在滚动条可动范围内）
当参数为Object的时候
对象参数中含有三个属性：behavior, block, inline
behavior：定义了元素滚动的行为，instant代表是立即滚动元素，smooth代表动画性的平滑滚动，但大部分浏览器并不支持smooth这个属性值，一般都是 instant。
block：定义了元素滚动的方向，对应Boolean类型参数，如果设置了start值，则相当于是设置了element.scrollIntoView(true)，如果设置了end值，则相当于是设置了element.scrollIntoView(false)
inline inline属性定义水平方向的对齐设置 默认为nearest 可选start, end, nearest, center 。由于水平方向的滚动条一般不会使用，因此保持在start就好。
以上就是js 实现锚点跳转示例解析的详细内容，更多关于js 锚点跳转的资料请关注脚本之家其它相关文章！
相关文章
js 将input框中的输入自动转化成半角大写（税号输入框）
本文主要介绍了税号输入框：将input框中的输入自动转化成半角大写的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家介绍了webpack的懒加载和预加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
在 JavaScript 中,内存泄露是指程序不再使用的内存没有被释放,从而导致内存的持续增长,最终可能导致性能下降或应用崩溃,本文整理了一些容易造成内存泄漏的操作以及预防方法,需要的可以了解下2024-12-12
这篇文章主要介绍了JS+CSS实现电子商务网站导航模板效果代码,涉及JavaScript结合css动态操作页面元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了javascript定义类和类的实现,结合实例形式较为详细的分析了JavaScript类的定义方式与相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了javascript基本数据类型及类型检测常用方法,总结分析了javascript的基本数据类型与类型检测的常用操作方法,具有一定参考借鉴价值,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了微信小程序实现星级评价效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
昨天是预热班学习的最后一天，为了检验我们是否能够升入就业班学习，进行了预热班结课考试。2009-11-11
这篇文章主要给大家介绍了关于微信小程序全局变量改变监听的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了Postman无法正常返回结果问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
最新评论