我使用 vanilla JS 让按钮平滑地向下滚动到 div 元素(定位 id)
我的代码是这样的:
this.myButton.addEventListener("click",load_section);
function load_section() {
document.querySelector('#myDiv').scrollIntoView({ block: 'end', behavior: 'smooth' });
}
在所有其他浏览器中,这会顺利滚动到该部分。在 Edge 中,它只是跳转到它。我需要更改什么才能使其平滑地向下滚动到该部分
最佳答案
有关平滑滚动方法的更全面列表,请参阅我的回答 here .
要在精确的时间内滚动到某个位置,window.requestAnimationFrame
可以投入使用,每次计算适当的当前位置。要滚动到某个元素,只需将 y 位置设置为 element.offsetTop
。
/*
@param pos: the y-position to scroll to (in pixels)
@param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
演示:
function scrollToSmoothly(pos, time) {
var currentPos = window.pageYOffset;
var start = null;
if(time == null) time = 500;
pos = +pos, time = +time;
window.requestAnimationFrame(function step(currentTime) {
start = !start ? currentTime : start;
var progress = currentTime - start;
if (currentPos < pos) {
window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
} else {
window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
}
if (progress < time) {
window.requestAnimationFrame(step);
} else {
window.scrollTo(0, pos);
}
});
}
document.getElementById("toElement").addEventListener("click", function(e){
scrollToSmoothly(document.querySelector('div').offsetTop, 500 /* milliseconds */);
});
document.getElementById("backToTop").addEventListener("click", function(e){
scrollToSmoothly(0, 500);
});
<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
<button id="backToTop">Scroll back to top</button>
</div>
SmoothScroll.js library也可以使用,除了更复杂的功能之外,它还支持滚动到页面上的某个元素,例如垂直和水平平滑滚动、在其他容器元素内滚动、不同的缓动行为、从当前位置相对滚动等等。
smoothScroll({toElement: document.getElementById('elementId'), duration: 500});
document.getElementById("toElement").addEventListener("click", function(e){
smoothScroll({toElement: document.querySelector('div'), duration: 500});
});
document.getElementById("backToTop").addEventListener("click", function(e){
smoothScroll({yPos: 'start', duration: 500});
});
<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cdfe1e3e3f8e4dfeffee3e0e0ccbda2bea2bc" rel="noreferrer noopener nofollow">[email protected]</a>/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button id="toElement">Scroll To Element</button>
<div style="margin: 1000px 0px; text-align: center;">Div element
<button id="backToTop">Scroll back to top</button>
</div>
关于javascript - scrollIntoView 边缘不平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51599677/