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高校计算机专业但核心目标是优…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...