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); }