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 锚点跳转的资料请关注脚本之家其它相关文章！