利用html、css和js实现从页面底部回到顶部

枕頭說他不想醒

已于 2022-08-15 10:43:58 修改

阅读量2.3k

点赞数 10

分类专栏： JavaScript 文章标签： html javascript css

于 2022-08-12 22:23:59 首次发布

本文链接：https://blog.csdn.net/weixin_52984349/article/details/126311218

版权

JavaScript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一、我们的需求

1、滚动条滚动超过临界点的时候，顶部通栏显示，未超过就隐藏

2、滚动条滚动超过临界点，回到顶部按钮显示，未超过就隐藏

二、布局结构

1.需要一个顶部标签和一个回到顶部按钮标签

2.让页面超过浏览器可视窗口高度

3.设置顶部样式，默认是在超出页面的

4.设置回到顶部按钮样式，默认是在隐藏的

代码展示：
设置基本样式

 <div class="header">顶部</div>
  <div class="goTop">回到顶部</div>

 //设置顶部样式
.header{
             width: 100%;
             height: 80px;
             display: flex;
             justify-content: center;
             align-items: center;
             font-size: 30px;
             color: #fff;
             background-color: rgb(86, 226, 180);
             transition: top 0.5s linear;
             overflow: hidden;
             position: fixed;
             top: -80px;
             left: 0;
         }
 //设置回到顶部样式
         .goTop{
             width: 50px;
             height: 50px;
             background-color: pink;
             font-size: 20px;
             text-align: center;
             line-height: 25px;
             color: #fff;
             position: fixed;
             bottom: 50px;
             right: 50px;
             display: none;     /* 默认隐藏 */
            
         }

三、逻辑分析

重点：

1.给浏览器绑定滚动事件，实时获取浏览器卷去的高度

2.判断卷去的高度决定隐藏还是显示

3.给回到顶部按钮绑定点击事件，点击的时候滚动回到顶部

首先

1、我们要获取header和goTop元素

var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')

2、紧接着绑定事件

 window.onscroll =function (){
          //获取当前浏览器的高度
          var height = document.documentElement.scrollTop || document.body.scrollTop

3、判断浏览器卷去的高度是否大于我们的临界点来决定我们要做那些事情

if(height >= 300) {
            //   设置行内样式显示顶部
            header.style.top = '0px'
            goTop.style.display = 'block'
          } else {
            //   设置行内样式隐藏
            header.style.top = '-80px'
            goTop.style.display = 'none'
          }
      }

4、给回到顶部绑定点击事件，使点击回到顶部的时候滚动回到顶部

goTop.onclick = function() {
        window.scrollTo({
            top:0,
            behavior:'smooth'
        })
    }

四、完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 
        需求：
        1、滚动条滚动找过临界点，顶部通栏显示，否则隐藏
        2、滚动条滚动超过临界点，回到顶部按钮显示，否则隐藏
        3、点击回到顶部按钮，滚动条滚动回到顶部
        布局结构:
        1.需要一个顶部通栏标签和一个回到顶部按钮标签
        2.让页面超过浏览器可视窗口高度
        3.设置顶部通栏样式，默认是在超出页面的
        4.设置回到顶部按钮样式，默认是在隐藏的

     -->
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         body{
             height: 3000px;
         }
         .header{
             width: 100%;
             height: 80px;
             display: flex;
             justify-content: center;
             align-items: center;
             font-size: 30px;
             color: #fff;
             background-color: rgb(86, 226, 180);
             transition: top 0.5s linear;
             overflow: hidden;
             position: fixed;
             top: -80px;
             left: 0;
         }
         .goTop{
             width: 50px;
             height: 50px;
             background-color: pink;
             font-size: 20px;
             text-align: center;
             line-height: 25px;
             color: #fff;
             position: fixed;
             bottom: 50px;
             right: 50px;
             display: none;     /* 默认隐藏 */
            
         }
         /* 
         代码逻辑
        1.给浏览器绑定滚动事件，实时获取浏览器卷去的高度
        2.判断卷去的高度决定隐藏还是显示
        3.给回到顶部按钮绑定点击事件，点击的时候滚动回到顶部
 */
     </style>
</head>
<body>
  <div class="header">顶部</div>
  <div class="goTop">回到顶部</div>
  <script>
      //1、获取header和goTop元素
      var header = document.querySelector('.header')
      var goTop = document.querySelector('.goTop')
      //2、绑定事件
      window.onscroll =function (){
          //获取当前浏览器的高度
          var height = document.documentElement.scrollTop || document.body.scrollTop
          //判断浏览器卷去的高度是否大于我们的临界点来决定我们要做那些事情
          if(height >= 300) {
            //   设置行内样式显示顶部
            header.style.top = '0px'
            goTop.style.display = 'block'
          } else {
            //   设置行内样式隐藏
            header.style.top = '-80px'
            goTop.style.display = 'none'
          }
      }

    //   3、给回到顶部绑定点击事件，使点击回到顶部的时候滚动回到顶部
    goTop.onclick = function() {
        window.scrollTo({
            top:0,
            behavior:'smooth'
        })
    }
  </script>
</body>
</html>