js脚本如何制作页面滚动到顶部_js返回顶部按钮脚本编写教程

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

js脚本如何制作页面滚动到顶部_js返回顶部按钮脚本编写教程

2025-11-12

浏览次数：次

返回列表

答案：通过创建固定按钮并监听滚动事件，使用window.scrollTo()实现平滑返回顶部功能。首先在HTML中添加按钮元素，用CSS将其定位在右下角并默认隐藏；当页面滚动超过200像素时，通过scroll事件显示按钮；点击按钮时调用window.scrollTo({ top: 0, beh*ior: 'smooth' })实现平滑滚动；为兼容老旧浏览器，可采用requestAnimationFrame结合递减滚动值模拟动画效果，最终实现轻量高效的返回顶部功能。

js脚本如何制作页面滚动到顶部_js返回顶部按钮脚本编写教程

页面滚动到顶部的J*aScript功能很常见，尤其在长网页中，添加一个“返回顶部”按钮能显著提升用户体验。实现这个功能并不复杂，下面详细介绍如何用原生J*aScript编写一个实用的返回顶部脚本。

1. 创建返回顶部按钮结构

先在HTML中添加一个按钮元素，通常放在页面底部或固定在右下角：

<button id="backToTopBtn">回到顶部</button>

使用CSS将其定位为固定位置，并默认隐藏：

#backToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: none; /* 滚动一定距离后显示 */
  font-size: 14px;
}
#backToTopBtn:hover {
  background-color: #0056b3;
}

2. 监听滚动事件控制按钮显示

当用户向下滚动一定距离（如200像素）后，显示按钮；回到顶部时再次隐藏。

const backToTopBtn = document.getElementById('backToTopBtn');
<p>window.addEventListener('scroll', () => {
if (window.pageYOffset > 200) {
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
});</p>

3. 实现平滑滚动到顶部

点击按钮时，让页面平滑滚动回顶部。可以使用 window.scrollTo() 方法结合选项参数实现平滑动画：

backToTopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    beh*ior: 'smooth'
  });
});

这个方法无需第三方库，利用浏览器原生支持的 smooth beh*ior 即可实现流畅效果。

Tanka

具备AI长期记忆的下一代团队协作沟通工具

146 查看详情 Tanka

4. 兼容不支持平滑滚动的浏览器

如果需要兼容老旧浏览器（如IE），可以用定时器模拟平滑滚动：

function smoothScrollToTop() {
  const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 0) {
    window.requestAnimationFrame(smoothScrollToTop);
    window.scrollTo(0, currentScroll - currentScroll / 8);
  }
}
<p>backToTopBtn.addEventListener('click', smoothScrollToTop);</p>

这段代码通过 requestAnimationFrame 实现更流畅的动画效果，逐步减小滚动位置直到顶部。

基本上就这些。一个完整的返回顶部功能只需几十行代码，结合CSS样式和事件监听就能高效运行。关键是根据实际需求选择原生平滑滚动还是手动实现兼容方案。

以上就是js脚本如何制作页面滚动到顶部_js返回顶部按钮脚本编写教程的详细内容，更多请关注其它相关文章！

# 老旧 # seo技巧方案 # 四会养殖业网站推广 # 傩文化介绍网站推广 # 南庄网站优化策划书 # 网站搬家怎么做SEO # 网站推广方法相当易速达 # 华阴网站关键词优化 # 山东日照建设网站 # 海南关键词排名提升百度 # 广安微信企业网站推广 # 就能 # 放在 # 未接 # 道中 # js脚本制作教程 # 文本框 # 何为 # 弹出 # 将其 # 背景色 # css样式 # win # 浏览器 # js # html # java # javascript # css