Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
使用:
let anchorElement = document.getElementById(anchorName);
anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
behavior可选
定义动画过渡效果,"auto"或"smooth"之一。默认为"auto"。
block可选
定义垂直方向的对齐,"start","center","end", 或"nearest"之一。默认为"start"。
inline可选
定义水平方向的对齐,"start","center","end", 或"nearest"之一。默认为"nearest"。
问题:如果头部有固定定位导航,就会丢失精度
如图:
解决:
let anchorElementHeight = document.getElementById(anchorName).offsetTop; // 要跳转元素到offsetParent顶部的距离
let navBar = document.getElementById('navBar').offsetHeight; //固定头部的高度
let nodes = document.getElementById('container'); //跳转元素的父元素
nodes.scrollTo({
top: anchorElementHeight-(navBar),
behavior:"smooth"
});