常用场景:页面锚点,点击跳转页面某固定位置
1.element.scrollToView()
(1)当页面有fixed顶部的布局时,由于fixed布局的元素脱离文档流,被scrollToView()的元素会被置顶到页面最顶部,导致部分被fixed布局的元素遮挡,因此不太适用。
(2)可用于页面没有fixed布局,常见的是顶部需要固定位置时可用element.scrollToView(),但是当点击的元素没有当前页面的高度(100vh)时,会出现整个页面上移的情况。
此时可用的解决办法是将最外层容器元素设置为fixed布局
.box{
position: fixed; top:0; left:0; right:0; bottom:0; overflow-y: scroll;
}
用法:
<div id="anchorName">123</div>
scrollToAnchor = (anchorName) => {
if (anchorName) {
let anchorElement = document.getElementById(anchorName); //取到需要移动的元素
if (anchorElement) {
anchorElement.scrollIntoView({
behavior: 'smooth',
});
}
}
2.element.scroll()
此方法比较通用,不管页面有何布局都可以用,计算元素离顶部的距离,然后向上移动对应的距离即可
scrollToAnchor = () => { let element = document.getElementById('xx'); let height = document.getElementById('xx').offsetTop; //计算需要向上移动的距离 element.scroll({ top: height, //向上移动的距离,如果有fixede布局, 直接减去对应距离即可 behavior: 'smooth', // 平滑移动 }); }