我已经搜索过了,虽然有人用 JavaScript
写了,但是回答都是用 jQuery。不管怎样,我该如何使用 JavaScript
来实现 window.scrollTo
的动画效果?我尝试使用 setInterval
但没有成功。非常感谢您的帮助。
我已经搜索过了,虽然有人用 JavaScript
写了,但是回答都是用 jQuery。不管怎样,我该如何使用 JavaScript
来实现 window.scrollTo
的动画效果?我尝试使用 setInterval
但没有成功。非常感谢您的帮助。
window.scrollTo({
top: selectedFrame.offsetTop,
left: 0,
behavior: 'smooth'
});
smooth
。window.scrollTo(0, 0);
<button onclick="scrollToTop(3000);"></button>
function scrollToTop(scrollDuration) {
var scrollStep = -window.scrollY / (scrollDuration / 15),
scrollInterval = setInterval(function(){
if ( window.scrollY != 0 ) {
window.scrollBy( 0, scrollStep );
}
else clearInterval(scrollInterval);
},15);
}
window.scrollTo
,但是动画效果有问题。 - user9645391scrollDuration
除以 15
?可以称其为“平滑度”因子或变量(以毫秒为单位)吗? - KeshavDulal我根据@SachinShah的答案为我的自定义需求编写了一个非常漂亮的滚动条。
对某些人可能会有用。
但首先让我告诉你它是做什么的。它可以:
请记住:
window.scrollBy
被使用,因此需要在逻辑中确定滚动方向(上/下)/**
* Scroll to the top of the page in a specified duration(ms) and smoothness(ms)
* ref: https://dev59.com/j1QK5IYBdhLWcg3wF8F6#52478645
* @param {String} elementID
* @param {Int} scrollDuration
* @param {Int} offset
* @param {Int} scrollSmoothness
*/
const fancyAScroll = (
elementID = 'main-content',
scrollDuration = 500,
offset = 0, // I had to use 120 to compensate for a sticky header
scrollSmoothness = 10
) => {
const accuracyBuffer = 10
try {
// #1 Calculate the final offset position to scroll-to
const element = document?.getElementById(elementID)
const bodyRect = document?.body?.getBoundingClientRect().top
const elementRect = element?.getBoundingClientRect().top
const elementPosition = elementRect - bodyRect
const offsetPosition = elementPosition - offset // final - target position to scroll
// #2 calculate steps & direction (up or down)
const scrollStepUnit = offsetPosition / (scrollDuration / scrollSmoothness)
const scrollStepDirection = offsetPosition > window?.scrollY ? '' : '-'
const scrollStepY = `${scrollStepDirection}${scrollStepUnit}`
// #3 keep on relatively scrolling untill reached to the destination
const scrollInterval = setInterval(() => {
let targetRangeReached =
offsetPosition - accuracyBuffer < window.scrollY &&
window.scrollY < offsetPosition + accuracyBuffer
targetRangeReached ? clearInterval(scrollInterval) : window.scrollBy(0, scrollStepY)
}, scrollSmoothness)
}
catch (error) {
console.error('Error @scrollTopWithDuration\n', error)
}
}
export default fancyAScroll
这种方法对我有效:
function slideTo(id) {
var element = document.getElementById(id);
document.body.scrollTo({
top: element.offsetTop,
behavior: 'smooth'
});
}
smooth
在 Safari 中不被支持。 - charles okojie