纯JS实现页面平滑滚动回顶部的简单方案

作者:青柠

时间:2026-10-22

浏览:359

本文介绍如何使用纯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实现页面返回顶部的动画(超简单)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章