AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端一键回到顶部案例

2024-09-26 49
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了如何实现网页中的一键回到顶部功能，包括两种方法：第一种是通过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>

js

<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>
文章标签：
前端开发
JavaScript
关键词：
前端案例
六卿
目录
相关文章
a15034260562-24955
|
6月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
a15034260562-24955
189 0
python编程狮
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统，django框架+bootstrap前端+echarts可视化，有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统，该系统通过用户行为分析和推荐算法优化，提供个性化的酒店推荐和直观的数据展示，以提升用户体验。
python编程狮
152 1
dream_ready
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码，前端展示并进行session验证（带完整前后端源码）
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证，包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
dream_ready
91 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码，前端展示并进行session验证（带完整前后端源码）
小徐在进步
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法，包括下拉菜单（`&lt;select&gt;` 和 `&lt;option&gt;`）、文本域（`&lt;textarea&gt;`）、标签解释（`&lt;label&gt;`）、各类按钮（`&lt;button&gt;`）及表单重置功能、无语义布局标签（`&lt;div&gt;` 和 `&lt;span&gt;`）以及字符实体的应用。此外，还提供了一个完整的注册信息表单案例，涵盖个人信息、教育经历和工作经历等部分，展示了如何综合运用上述元素构建实用的表单。
小徐在进步
45 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
六卿
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法，并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
六卿
43 0
前端基础(十)_Dom自定义属性(带案例)
六卿
|
2月前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例，包括了服务端和客户端的代码实现，以及如何通过socket.io进行事件的发送和监听来实现实时通信。
六卿
38 2
小徐在进步
|
2月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法，包括清除内外边距、列表项目符号等；探讨了外边距的合并与塌陷问题及其解决策略；讲解了行内元素垂直边距的处理技巧；并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例，展示了所学知识的实际应用。
小徐在进步
55 11
小徐在进步
|
2月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式：块级元素、行内元素与行内块元素，并详细解释了各自的特性和应用场景。块级元素独占一行，宽度默认为父级100%，可设置宽高；行内元素在同一行显示，尺寸由内容决定，设置宽高无效；行内块元素在同一行显示，尺寸由内容决定，可设置宽高。此外，还提供了两个综合案例，包括热词展示和banner效果实现，帮助读者更好地理解和应用这些显示模式。
小徐在进步
48 6
小徐在进步
|
2月前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下，先整体再局部”的制作思路，逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就，同时介绍其开发的Vue.js框架特点。代码结构清晰，注重细节处理，如使用快捷键提高效率，预留超链接位置等，确保最终效果符合预期。
小徐在进步
52 7
土木林森
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战：JSF 表格组件如何做到毫秒级响应？揭秘背后的性能魔法！💪
【8月更文挑战第31天】在 Web 应用中，表格组件常用于展示和操作数据，但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces（JSF）中优化表格组件的方法，包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据，减少不必要的数据加载和优化数据库查询，并利用缓存机制减少数据库访问次数，从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
土木林森
70 0

热门文章

最新文章

  • 1
    前端性能优化参考资料
  • 2
    前端，测试如何修改后端接口返回的响应数据
  • 3
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 4
    前端 时间个性化 插件 jquery.timeago.js
  • 5
    前端分页插件pagination
  • 6
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 7
    wordpress页面前端添加编辑按钮
  • 8
    深入了解Webpack：前端模块打包工具
  • 9
    前沿技术探索：构建更智能的前端开发体验
  • 10
    GIS前端—Popup标注视图
  • 1
    前端后端测试接口mork神器，Apifox使用一分钟入门
    209
  • 2
    编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
    467
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    54
  • 4
    基于jeecg前端实现从表ERP格式选择
    34
  • 5
    前端进度条组件NProgress
    81
  • 6
    前端效果 登入界面
    49
  • 7
    vue前端展示【1】
    31
  • 8
    nvm,npm,yarn相关指令，前端配置准备
    54
  • 9
    深入浅出JVM（六）之前端编译过程与语法糖原理
    49
  • 10
    HTML5基础题及答案——必刷前端题目(背)
    58

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云OSS设置跨域访问