2022年5月15日
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);
}