根据页面滚动位置显示浮动框 document.documentElement.scrollTop

linlinlove2

已于 2022-05-17 11:54:35 修改

阅读量360

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 css3

于 2022-05-17 11:51:41 首次发布

本文链接：https://blog.youkuaiyun.com/withkai44/article/details/124818512

本文介绍如何使用HTML、CSS和JavaScript创建一个根据页面滚动位置自动显示和隐藏的浮动导航栏。通过设置position: fixed和onscroll事件，当页面滚动超过一定高度时，导航栏会固定在底部。点击返回顶部按钮，可快速回到页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>根据页面滚动位置显示浮动框</title>
  <style>
    body {
      height: 2000px;
    }

    #toTop {
      position: fixed;
      bottom: 100px;
      right: 0;
      display: none;
    }
  </style>
</head>

<body>
<div>ddddddddddddddddddddddddddddddddddddddddd</div>
<div>ddddddddddddddddddddddddddddddddddddddddd</div>
<div>ddddddddddddddddddddddddddddddddddddddddd</div>
<div>ddddddddddddddddddddddddddddddddddddddddd</div>
<div>ddddddddddddddddddddddddddddddddddddddddd</div>
<div>ddddddddddddddddddddddddddddddddddddddddd</div>
<div>ddddddddddddddddddddddddddddddddddddddddd</div>
  <div id="toTop">
    <a href="javascript:goToTop()">返回顶部</a>
  </div>

  <script>
    var div = document.getElementById("toTop");
    document.body.onscroll = function () {
      var heightTop = document.documentElement.scrollTop;
      if (heightTop >= 500)
        div.style.display = "block";
      else
        div.style.display = "none";
    }
    function goToTop() {
      document.documentElement.scrollTop = 0;
    }
  </script>
</body>

</html>