本文介绍如何使用纯JavaScript结合CSS3 transition属性,实现页面点击后平滑滚动回顶部的功能。通过动态设置body元素的marginTop并配合setTimeout清除过渡效果,完成简洁的返回顶部动画,无需依赖任何第三方库。
纯JS实现页面平滑滚动回顶部的简单方案
废话不多说,直接上代码
var scrollTop = document.body.scrollTop;
document.body.style.marginTop = -scrollTop + 'px';
document.body.scrollTop = 0;
document.body.style.transition = 'all 1s ease-in-out';
document.body.style.marginTop = 0;
setTimeout(function () { document.body.style.transition = 'none'; }, 1000);
以上这篇纯js实现页面返回顶部的动画(超简单)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。