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

作者:青柠时间:2026-10-22 06:57:23浏览:360

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

作者最新文章