js 模拟锚点跳转

使用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' });
        }
    }
}