H5跳转到指定位置的方法

1. 锚点:
br只是占位用.

<a href="#anchor">点击跳转到锚点</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div id="anchor">锚点位置</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

锚点可以通过a标签跳转, 也可以通过js跳转

window.location.hash = '#anchor'

2.Element.scrollIntoView()

const element = document.querySelector("#comment");
element.scrollIntoView();

3. 通过动画修改元素偏移量, 顺滑滚动到元素位置

function scrollToElement(elementId,speed){
    let destEle = document.getElementById(elementId);
    let scrolltopTemp = document.documentElement.scrollTop || document.body.scrollTop;
    let rect = destEle.getBoundingClientRect();
    // 获取元素相对窗口的top值,此处应加上页面本身的偏移
    let top = scrolltopTemp + rect.top;
    let currentTop = 0;
    let requestId;
    // 采用requestAnimationFrame,平滑动画
    function step () {
        currentTop += speed;
        if (currentTop <= top) {
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
        } else {
            window.cancelAnimationFrame(requestId);
        }
    }
    window.requestAnimationFrame(step);
}
 

 

Add a Comment

您的电子邮箱地址不会被公开。