vue中进入页面,滚动到锚点位置
需求场景:比如一个页面导航有蔬菜、水果、肉类,通过改变链接去跳转到蔬菜、水果、肉类所在的位置。方法一:使用<a>标签我一开始使用<a>标签的锚点触发,发现<a>标签无法通过手动直接改变链接hash去跳到指定锚点(运营会这样操作),那么是否可以进入页面后直接自动触发这个<a>标签事件, 但是默认是禁止了<a>标签点击事件自动触发,...
·
需求场景:比如一个页面导航有蔬菜、水果、肉类,通过改变链接去跳转到蔬菜、水果、肉类所在的位置。
方法一:使用<a>标签
我一开始使用<a>标签的锚点触发,发现<a>标签无法通过手动直接改变链接hash去跳到指定锚点(运营会这样操作),那么是否可以进入页面后直接自动触发这个<a>标签事件, 但是默认是禁止了<a>标签点击事件自动触发 ,就只能在<a>标签内添加子元素<span>,通过触发子元素,冒泡事件,从而触发a标签。
方法二:能不能不通过添加子元素就去触发、那么干脆点就不要<a>标签去做这些操作了。转而使用scrollIntoView
setTimeout(() => {
document.getElementById(md.slice(1)).scrollIntoView(true);
}, 5);
需要加上延时,避免进来的时候就开始滚动,DOM节点获取不到。
Element.scrollIntoView()
方法让当前的元素滚动到浏览器窗口的可视区域内。
注意:这个方法取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。
参数:可选,Boolean类型
- 如果为
true
,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的scrollIntoViewOptions: {block: "start", inline: "nearest"}
。这是这个参数的默认值。 - 如果为
false
,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}
参考:
更多推荐
已为社区贡献6条内容
所有评论(0)