js返回顶部按钮

最新推荐文章于 2024-06-21 16:41:46 发布

珊珊而川

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量259

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_63681863/article/details/134625962

版权

返回顶部模块

你可以使用 JavaScript 和 CSS 来实现滚动到底部时显示侧边栏，并点击返回顶部按钮返回页面顶部的效果。下面是一个简单的示例代码：

HTML：

<!DOCTYPE html>
<html>
<head>
  <style>
    #sidebar {
      position: fixed;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      width: 100px;
      height: 200px;
      background-color: #ccc;
      display: none;
    }

    #backToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <div id="sidebar">侧边栏内容</div>
  <button id="backToTop">返回顶部</button>

  <!-- 页面内容 -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu risus vel arcu gravida iaculis. Ut fringilla semper tellus vitae ornare. Donec fermentum mauris in nisl ullamcorper, eget mollis nunc viverra. Quisque luctus enim a finibus cursus. Nam tincidunt nulla non efficitur ultrices. Phasellus nec ligula vel metus rutrum malesuada.</p>
  <p>Curabitur non dignissim eros. Nullam tempor mauris lectus, iaculis pellentesque erat posuere cursus. Proin elementum ex a urna cursus, ut malesuada turpis eleifend. Sed varius sem et imperdiet tempor. Fusce ac semper enim.</p>
  <!-- ... -->

  <script src="script.js"></script>
</body>
</html>

JavaScript（在 <script> 标签或外部脚本文件中）：

window.addEventListener('scroll', function() {
  var sidebar = document.getElementById('sidebar');
  var backToTopButton = document.getElementById('backToTop');

  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    sidebar.style.display = 'block';
  } else {
    sidebar.style.display = 'none';
  }

  if (window.scrollY > 0) {
    backToTopButton.style.display = 'block';
  } else {
    backToTopButton.style.display = 'none';
  }
});

document.getElementById('backToTop').addEventListener('click', function() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

这段代码使用了 window 对象的 scroll 事件来监听页面滚动事件。当页面滚动到底部时，侧边栏会显示出来；当页面顶部时，返回顶部按钮会显示出来。点击返回顶部按钮时，使用 window.scrollTo() 方法将页面平滑滚动到顶部。

注意：你可能需要将 JavaScript 代码放在 <body> 结束标签之前，或者在 DOM 加载完成后执行脚本（例如使用 DOMContentLoaded 事件）以确保正确获取元素。

解释这段代码的作用if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {这段代码的作用是判断页面是否已经滚动到了底部。具体来说，它使用了以下值进行比较：

window.innerHeight：表示浏览器窗口的视口高度，即用户当前可见的页面区域的高度。
window.scrollY：表示页面在垂直方向已经滚动的距离。
document.body.offsetHeight：表示整个文档的高度，包括了滚动条未显示的部分。

当满足条件 window.innerHeight + window.scrollY >= document.body.offsetHeight 时，就意味着滚动条已经滚动到了页面底部。这是因为 window.innerHeight + window.scrollY 表示当前视口底部相对于页面顶部的距离，而 document.body.offsetHeight 表示整个页面的高度。当这两者之和大于等于页面的总高度时，就表示用户已经滚动到了页面底部。

在实际应用中，可以利用这个判断来触发一些特定的操作或者显示相关的内容，比如加载更多内容、显示返回顶部按钮等。

珊珊而川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js返回顶部按钮

你可以使用 JavaScript 和 CSS 来实现滚动到底部时显示侧边栏，并点击返回顶部按钮返回页面顶部的效果。当页面滚动到底部时，侧边栏会显示出来；当页面顶部时，返回顶部按钮会显示出来。点击返回顶部按钮时，使用。在实际应用中，可以利用这个判断来触发一些特定的操作或者显示相关的内容，比如加载更多内容、显示返回顶部按钮等。当这两者之和大于等于页面的总高度时，就表示用户已经滚动到了页面底部。时，就意味着滚动条已经滚动到了页面底部。表示当前视口底部相对于页面顶部的距离，而。方法将页面平滑滚动到顶部。
复制链接

扫一扫