CSS实现回到顶部且平滑过渡
背景
最近同学在项目开发的时候问了我一个问题：小白，回到顶部该怎么做呀？我当时就愣住了，心想这不是很基础的一个功能吗，然后想到该同学没有系统学过网页三剑客，我就给他讲了该怎么实现这个虽然基础但在很多项目中都很实用的功能。
不过我还是笑了，为啥，因为我不允许还有人不会这个听起来貌似高大上的回到顶部，所以我选择更一篇。（大佬绕道 /plea手）
基本介绍
本文仅介绍回到顶部功能的CSS做法（毕竟这么简单没有特别的需求都能用） 。
后续或许会出涉及JS的用法
什么是回到顶部按钮？
回到顶部按钮是一个浮动在页面右下角的小图标，用户点击后可以立即返回到页面的顶部。这种设计可以有效地提高网站的可用性，尤其是在移动设备上，用户只需轻轻一按就能回到开始阅读的位置。
代码实现
以下是实现回到顶部效果的 HTML 和 CSS 代码示例，功能以外的样式从简处理。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>back-to-top-demo</title><style>/* 通配 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 滚动条样式 *//* 定义滚动条宽度和背景颜色 */::-webkit-scrollbar {width: 8px;background-color: #F5F5F5;}/* 定义滚动条轨道的阴影和圆角 */::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}/* 定义滑块的圆角和阴影 */::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #555;}html,body {/* height: 100%; *//* width: 100%; */background-color: rgba(153, 153, 255, .3);/* 平滑过渡效果 */scroll-behavior: smooth;}/* scoped样式 */#title {text-align: center;font-weight: 900;font-family: '宋体';padding: 10px;}#to_top_ball {display: block;text-align: center;line-height: 60px;/* display: flex;justify-content: center;align-items: center; */width: 60px;height: 60px;font-size: 50px;background-color: rgb(153, 204, 255);border-radius: 50%;text-decoration: none;color: rgb(255, 255, 255);box-shadow: 0 0 20px 0 rgba(0, 0, 255, .5);position: fixed;bottom: 20px;right: 20px;/* opacity: .6; */transition: all .6s;}#to_top_ball:hover {background-color: rgb(255, 102, 102);box-shadow: 0 0 30px 0 rgba(255, 0, 0, .8);transform: translate(0, -10px);}</style>
</head><body><div id="index"><h1 id="title">我是标题</h1><div id="content"><p id="a">我是内容</p><p>我是内容</p><p>我是内容</p><p>我是内容</p>/* p{我是内容}*100；需要自己添加足够多能出现滚动条的内容 */</div><a href="#index" id="to_top_ball">↑</a></div>
</body></html>
重点代码
平滑过渡
很多人会嫌CSS做的回到顶部太过于生涩，点一下它就直接跳到目标锚点了，然后纷纷选择使用JS，但事实的确如此吗？CSS真的做不了平滑过渡的拉动效果吗？当然不！ 一行CSS样式设置让你对它刮目相看。
html,
body {/* ...other codes... */scroll-behavior: smooth;/* 平滑过渡效果 */
}
#to_top_ball
#to_top_ball {/* 球内内容水平垂直居中法一 */display: block;text-align: center;line-height: 60px;/* 球内内容水平垂直居中法二 *//* display: flex;justify-content: center;align-items: center; */width: 60px;height: 60px;/* 控制箭头大小 */font-size: 50px;background-color: rgb(153, 204, 255);border-radius: 50%;text-decoration: none;color: rgb(255, 255, 255);/* 呈现立体效果 */box-shadow: 0 0 20px 0 rgba(0, 0, 255, .5);/* 固定定位，相对窗口 */position: fixed;bottom: 20px;right: 20px;/* 过渡效果，球hover后不生涩 */transition: all .6s;
}
/* 球hover后的效果 */
#to_top_ball:hover {background-color: rgb(255, 102, 102);box-shadow: 0 0 30px 0 rgba(255, 0, 0, .8);transform: translate(0, -10px);
}
#to_top_ball的内容控制
#to_top_ball {/* 球内内容水平垂直居中法一 */display: block;text-align: center;line-height: 60px;/* 球内内容水平垂直居中法二 *//* display: flex;justify-content: center;align-items: center; *//* ...other codes... */
}
主要知识点
主要利用了a标签的href属性与其他标签的id属性进行配合
Q&A
Ⅰ
Q：a标签的href属性与其他标签的class属性进行配合可以吗？
A：当然肯定必须不行呀，举个例子，你喝完孟婆汤之后被带到了一个分叉路口，前面四五个指示牌都是罗马，这你怎么走，一不小心选错就变牛马…
Ⅱ
Q：a标签href属性的值我可以写#top吗？
A：当然肯定必须可以呀，只要想达到的效果是回到当前页面顶部就行，自己写带id的元素只是可以更灵活控制scroll到的位置。
总结
等一个课代表评论区总结，笑。
相关文章：
CSS实现回到顶部且平滑过渡
背景 最近同学在项目开发的时候问了我一个问题：小白，回到顶部该怎么做呀？我当时就愣住了，心想这不是很基础的一个功能吗，然后想到该同学没有系统学过网页三剑客，我就给他讲了该怎么实现这个虽然基础但在很多…...
)
10 go语言（golang） - 数据类型：哈希表（map）及原理(二)
扩容 在 Go 语言中，当 map 的元素数量达到一定阈值时，会触发扩容操作以保持性能。这个过程称为 rehashing，即重新散列所有的键值对到一个更大的哈希表中。 扩容的条件 源码： func mapassign(t *maptype, h *hmap, key unsafe.…...
【论文解读】Med-BERT: 用于疾病预测的大规模结构化电子健康记录的预训练情境化嵌入
【论文解读】Med-BERT: 用于疾病预测的大规模结构化电子健康记录的预训练情境化嵌入 Med-BERT：pretrained contextualized embeddings on large-scale structured electronic health records for disease prediction 摘要：基于电子健康记录（EHR）的深度学习（DL）预…...
[POI2014] PTA-Little Bird（单调队列优化 DP）
luogu 传送门https://www.luogu.com.cn/problem/P3572 解题思路 先设 表示到 的最小劳累值。 很容易得出转移： 其中 由 和 的大小关系决定，并且 。 很显然，直接暴力是 的，会超时。 于是，考虑优化。 我们发现…...
【含开题报告+文档+PPT+源码】基于SpringBoot的体育馆管理系统的设计与实现
开题报告 近年来，随着人们生活水平的提高和健康意识的增强，体育馆作为提供体育锻和休闲娱乐的重要场所，其使用频率和管理难度也在不断增加。传统的体育馆管理模式通常依赖于人工记录和手动操作，不仅效率低下，而且容易…...
Vue3学习：vue组件中的图片路径问题
今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。 list: [{ id: 1, name: 欧拉公式啤酒杯, price: 30.00, src: ./assets/images/Euler.png},{ id: 2, name: 高斯分布马克杯, price: 40.00, src: ./…...
openCV基础-图像预处理Day26
图像预处理 在计算机视觉和图像处理领域，图像预处理是一个重要的步骤，它能够提高后续处理（如特征提取、目标检测等）的准确性和效率。OpenCV 提供了许多图像预处理的函数和方法，以下是一些常见的图像预处理操作&…...
给文件添加可读可写可执行权限
在Unix、Linux或类Unix操作系统中，你可以使用chmod命令来给文件添加可读、可写和可执行权限。权限通常分为三组：文件所有者（owner）、文件所属组（group）和其他用户（others）。每组都可…...
golang有序map
最近使用go开发排行榜的需求, 有些情况会用到有序map, 但是go竟然没有有序map的实现 本着自己动手丰衣足食的原则, 就自己实现了一个 原理 原理比较简单, 主要结合了container/list双向链表和map 使用双向链表存储key和value, 保证顺序, 使用map存储key和节点信息, 保证查找…...
【LangChain系列4】【Chain模块详解】
目录 前言一、LangChain1-1、介绍1-2、LangChain抽象出来的核心模块1-3、特点1-4、langchain解决的一些行业痛点1-5、安装 二、Chain模块2-1、介绍2-2、LLMChain2-3、Sequential Chain（顺序链）2-4、Router Chain 总结 前言 LangChain给自身的定位是&…...
51c嵌入式~IO合集1
我自己的原文哦~ https://blog.51cto.com/whaosoft/12383193 一、单片机通信数据接收解析方法 前阵子一朋友使用单片机与某外设进行通信时，外设返回的是一堆格式如下的数据： AA AA 04 80 02 00 02 7B AA AA 04 80 02 00 08 75 AA AA 04 80 02 00 9B E2…...
ETLCloud怎么样？深度解析其在数据管理中的表现
在BI或数据大屏等数据分析工具中，经常需要从多个业务系统中提取原始数据，然后对数据进行清洗、处理，以获取高质量、有效且干净的数据以供后续的BI进行数据统计和分析使用，从高质量的实现企业数据的价值变现。 然而，在…...
高频谐振功放电路
目录 集电极馈电电路 高频扼流圈的作用: 并联馈电回路 高频扼流圈作用 : 优缺点 对于并联的集电极馈电网络: 对于串联的集电极馈电网络: 神奇之处 基级馈电电路 自反偏压: 复合输出回路 天线回路 效率分析 总效率分析 互感如何改变工作状态 集电极馈电电路 馈电电路分…...
kafka如何获取 topic 主题的列表？
大家好，我是锋哥。今天分享关于【kafka如何获取 topic 主题的列表？】面试题？希望对大家有帮助； kafka如何获取 topic 主题的列表？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在Kafka中，可以…...
全新大模型框架Haystack，搭建RAG pipeline
大家好，在AI应用开发的赛道上，目前Haystack以其开源框架的优势，成为LLM技术领域的一匹黑马，对现有竞争者构成挑战。本文将介绍Haystack的亮点优势，并分析它为何能在众多LLM框架中脱颖而出，通过RAG应用实例来…...
儿童孤独症专家分享：了解治疗与支持的专业帮助
在儿童的成长旅程中，每一步都充满了探索与发现。然而，对于患有孤独症的儿童来说，这段旅程往往伴随着更多的挑战与困难。孤独症，这个看似遥远的词汇，却深刻地影响着无数家庭的生活。作为儿童孤独症领域的专家࿰…...
初始JavaEE篇——多线程（7）：定时器、CAS
找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏：JavaEE 目录 定时器的使用 定时器的原理 模拟实现定时器 CAS 介绍 CAS的应用场景 解析 AtomicInteger 类 实现自旋锁 CAS的缺陷…...
高精度计算（乘）
引言 此篇是专栏信息学杂谈第八篇高精度计算（乘），展示了关于C如何实现高精度乘法的代码 正文： 乘法进位 c[i j - 1] a[i] * b[j] x; //x为之前进位 x c[i j - 1] / 10; c[i j - 1] % 10;完整代码： #include …...
在vue中 如何实现跨域
跨域问题是Web开发中常见的挑战，那么如何解决跨域呢，我们一起来看看吧！ 跨域是什么？ 跨域（Cross-Origin）是指网络请求从一个域名（origin）发起，而请求的目标资源位于另一…...
计算机考研，选择西安交通大学还是哈工大？
C哥专业提供——计软考研院校选择分析专业课备考指南规划 经过全面分析，2025年考研西安交通大学和哈尔滨工业大学计算机专业的报考难度对比如下： 西安交通大学计算机专业 > 哈尔滨工业大学计算机专业 对于想要报考985高校计算机专业但核心目标是优…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
return this；返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
如何更改默认 Crontab 编辑器 ？
在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称：装饰器模式（Decorator Pattern） 👦 小明最近上线了校园奶茶配送功能，业务火爆，大家都在加料： 有的同学要加波霸 🟤，有的要加椰果…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...
STM32标准库-ADC数模转换器
文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”：输入模块（GPIO、温度、V_REFINT）1.4.2 信号 “调度站”：多路开关1.4.3 信号 “加工厂”：ADC 转换器（规则组 注入…...