轻盈回顶教你轻松实现网页返回顶部功能

2023-11-12 约 1262 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=134363273

轻盈回顶：教你轻松实现网页返回顶部功能

提示：文章为原创内容

文章目录

前言

在当今互联网时代，用户体验已成为前端开发的核心关注点。随着移动设备的普及，浏览长篇幅内容时，用户可能会感到操作繁琐，而回到顶部功能则为用户提供了一种快速定位到页面顶部的便捷方式。实现回到顶部功能已成为前端开发者必备的技能。本文旨在实现回到顶部功能的方法，以帮助开发者轻松掌握这一技术，提升用户体验。

一、返回顶部是什么？

返回顶部功能，是一种在前端页面中常见的设计元素。它允许用户在浏览长篇幅内容或深层次页面时，通过点击按钮或滑动手指，快速跳转到页面顶部。这种功能旨在提高用户体验，使浏览过程更加便捷。

二、功能实现

页面功能展示图

1.HTML部分

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回到顶部</title>
</head>
<body>
  <!-- 回到顶部按钮 -->
  <div class="backTop" id="backTop">Top</div>
</body>
</html>

2.CSS

代码如下（示例）：

/* 设置body高度为 3000px，页面就有滚动条显示啦 */
    body {
      height: 3000px;
    }

    /* 回到顶部 */
    .backTop {
      /* 固定定位 */
      position: fixed;
      bottom: 250px;
      right: 0;
      margin-right: 20px;
      z-index: 999;
      /* 回到顶部样式 */
      width: 35px;
      height: 35px;
      background-color: deepskyblue;
      /* 字体在元素中水平垂直居中 */
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      color: white;
      /* 设置圆角 */
      border-radius: 50%;
      /* 设置过渡效果 */
      transition: all linear 0.5s;
      cursor: pointer;
      /* 隐藏 透明度为0 */
      opacity: 0;
    }

3.JavaScrip

代码如下（示例）：

    /* 
    需求：当页面滚动大于300像素，就显示回到顶部按钮
    */
    // 获取回到顶部元素
    const backTop = document.querySelector('#backTop')
    // L2 事件监听
    // 给页面添加 滚动事件
    window.addEventListener('scroll', function () {
      // 检测页面滚动的头部距离属性
      const n = document.documentElement.scrollTop
       // 三元运算符 简写判断
      backTop.style.opacity = n >= 300 ? 1 : 0
    })
    // 需求：点击返回按钮，页面会返回顶部
    // 给回到顶部元素添加 点击事件
    backTop.addEventListener('click',function () {
      document.documentElement.scrollTop = 0
    })

滚动事件 —— 判断是否透明有多种写法

1.通过if else进行判断，这种最容易理解

 // if判断
    if (n >= 300) {
       backTop.style.opacity = 1
    } else {
       backTop.style.opacity = 0
    }

2.通过三元运算符，进行判断

// 三元运算符判断
   n >= 300 ? backTop.style.opacity = 1 :  backTop.style.opacity = 0

页面会返回顶部，除了给 document.documentElement.scrollTop 设置为 0 以外，可以用滚动到指定的坐标方式

用滚动到指定的坐标方式

// 让页面滚动到 y 轴0像素的位置
   window.scrollTo(0, 0)

4.整体代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回到顶部</title>
  <style>
    /* 设置body高度为 3000px，页面就有滚动条显示啦 */
    body {
      height: 3000px;
    }

    /* 回到顶部 */
    .backTop {
      /* 固定定位 */
      position: fixed;
      bottom: 250px;
      right: 0;
      margin-right: 20px;
      z-index: 999;
      /* 回到顶部样式 */
      width: 35px;
      height: 35px;
      background-color: deepskyblue;
      /* 字体在元素中水平垂直居中 */
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      color: white;
      /* 设置圆角 */
      border-radius: 50%;
      /* 设置过渡效果 */
      transition: all linear 0.5s;
      cursor: pointer;
      /* 隐藏 透明度为0 */
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="backTop" id="backTop">Top</div>
  <script>
    /* 
    需求：当页面滚动大于300像素，就显示回到顶部按钮
    */
    // 获取回到顶部元素
    const backTop = document.querySelector('#backTop')
    // L2 事件监听
    // 给页面添加 滚动事件
    window.addEventListener('scroll', function () {
      // 检测页面滚动的头部距离属性
      const n = document.documentElement.scrollTop
      backTop.style.opacity = n >= 300 ? 1 : 0
    })
    // 需求：点击返回按钮，页面会返回顶部
    // 给回到顶部元素添加 点击事件
    backTop.addEventListener('click',function () {
      document.documentElement.scrollTop = 0
    })
  </script>
</body>

</html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 返回顶部功能 的实现，它能帮助用户快速定位到页面顶部，提高浏览体验。实现方式有多种，如使用 HTML5 的

元素结合 CSS3 动画、JavaScript L2事件监听、事件点击等。回到顶部功能可以提升用户满意度，优化页面交互，尤其在长页面或滚动页面中显得尤为实用。