JavaScript实现丝滑返回顶部
本帖最后由 逆风天 于 2024-2-3 02:53 编辑JavaScript实现丝滑返回顶部
实现目标：点击链接或按钮，平滑返回顶部。
1.先写js，如下：
function backToTop(selector, offset, prop = 'all', time = '300', effect = 'ease', delay = 0) {
const windowScrolled = function () {
if (document.body.scrollTop > offset || document.documentElement.scrollTop > offset) {
selector.classList.add('show');
} else {
selector.classList.remove('show');
selector.removeAttribute('class');
}
};
const scrollEvt = function () {
document.documentElement.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
};
return selectorListener;
return windowListener;
}2.然后使用，如下：
const setBackTop = document.querySelector('');
backToTop(setBackTop, 800);3.最后写一个html标签，如下：
<a href="javascript:;" data-nft-toggle="backTop">返回顶部</a>4.参数说明：
backToTop(html element, offset, transition-property, transition-duration, transition-timing-function, transition-delay);
大致就是这样了。
页:
[1]