使用scrollIntoView
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在,就跳转到锚点
if (anchorElement) {
anchorElement.scrollIntoView({ inline: 'start', block: 'start', behavior: 'smooth' });
}
Element.scrollIntoView()
方法让当前的元素滚动到浏览器窗口的可视区域内。
- 不过这个在移动端有时候会出现bug
js 模拟锚点进行滚动
//传入2个参数都是对应的class名 只是为了获取dom 可以随便改
// 第一个参数为当前点击的dom
// 第二个参数为当前点击的dom的可滚动父级dom 注意这里是可滚动的,不是单单的父级dom ,可以是父级的父级,无所谓的,只是你要进行滚动的那个
scrollToAnchor(anchorName,parentAnchorName) {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementsByClassName(anchorName)[0];
// 如果对应id的锚点存在,就跳转到锚点
if (anchorElement) {
// 获取到父类名
let parent = document.getElementsByClassName(parentAnchorName)[0];
if(parent){
let num = 15; //滚动的基数
let intervalTime = null;
let maxHeight = parent.scrollHeight-parent.offsetHeight;
let domTop = anchorElement.offsetTop;
if(domTop-parent.scrollTop>=0){ //向下
intervalTime = setInterval(function () {
let top = parent.scrollTop
if(domTop- 50<=top||top==maxHeight) {
clearInterval(intervalTime)
intervalTime = null;
} else {
parent.scrollTop = top + num;
}
}, 10);
}else{//向上
intervalTime = setInterval(function () {
let top = parent.scrollTop
if(domTop>=top+50||top==0) {
clearInterval(intervalTime)
intervalTime = null;
} else {
parent.scrollTop = top - num;
}
}, 10);
}
}
// anchorElement.scrollIntoView({ inline: 'start', block: 'start', behavior: 'smooth' });
}
}
}