前端一键回到顶部案例-阿里云开发者社区

前端一键回到顶部案例

2024-09-26 5

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了如何实现网页中的一键回到顶部功能，包括两种方法：第一种是通过HTML中的锚点跳转实现快速回到顶部；第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果，让页面滚动更加平滑自然。

首先看一下简单搭建的样式：
在这里插入图片描述
上面头部，左侧菜单，右侧是内容区域，内容区域可以超出后，形成滚动条。滚轮滑动到下方出现滚动条。

页面出现的代码：

<!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>
  <style>
    * {
    
      padding: 0;
      margin: 0;
    }

    html,
    body {
    
      height: 100%;
      width: 100%;
    }

    .box1 {
    
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .top {
    
      height: 90px;
      border: 2px solid #ff0;
    }

    .bottom {
    
      display: flex;
      height: calc(100% - 90px);
    }

    .left {
    
      width: 200px;
      border: 2px solid #ccc;
    }

    .right {
    
      flex: 1;
      border: 2px solid #333;

      overflow: hidden;
      overflow-y: auto;
    }

    .rightChildP {
    
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="top">top</div>
    <div class="bottom">
      <div class="left">left</div>
      <div class="right">
        <div class="rightChild">
          <div id="header">我在顶部</div>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

1.利用a标签跳转锚点

        <div class="rightChild">
          <div id="header">我在顶部</div>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <div><a href="#header">返回顶部</a></div>
        </div>

结果：点击后立即回到顶部，浏览器url发生变化

在这里插入图片描述
2.利用js，做动画效果 scrollTo

  <div class="right">
        <div class="rightChild">
          <div id="header">我在顶部</div>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <p class="rightChildP">rightChild</p>
          <div><a href="#header">返回顶部</a></div>
        </div>
      </div>

<script>
  function go() {
   
    let right = document.getElementsByClassName('right')[0]
    const t = right.scrollTop
    console.log(t, 'tt')
    if (t > 0) {
   
      window.requestAnimationFrame(go);
      right.scrollTo(0, t - t / 8);
    }
  }
</script>

前端一键回到顶部案例

热门文章

最新文章

相关课程

相关电子书

相关实验场景