当前位置：首页 > news >正文

CSS实现回到顶部且平滑过渡

news 2026/1/1 13:47:37

背景

最近同学在项目开发的时候问了我一个问题：小白，回到顶部该怎么做呀？我当时就愣住了，心想这不是很基础的一个功能吗，然后想到该同学没有系统学过网页三剑客，我就给他讲了该怎么实现这个虽然基础但在很多项目中都很实用的功能。

不过我还是笑了，为啥，因为我不允许还有人不会这个听起来貌似高大上的回到顶部，所以我选择更一篇。（大佬绕道 /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实现回到顶部且平滑过渡

背景最近同学在项目开发的时候问了我一个问题：小白，回到顶部该怎么做呀？我当时就愣住了，心想这不是很基础的一个功能吗，然后想到该同学没有系统学过网页三剑客，我就给他讲了该怎么实现这个虽然基础但在很多…...

编程日记 2024/11/1 22:55:40

10 go语言（golang） - 数据类型：哈希表（map）及原理(二)

扩容在 Go 语言中，当 map 的元素数量达到一定阈值时，会触发扩容操作以保持性能。这个过程称为 rehashing，即重新散列所有的键值对到一个更大的哈希表中。扩容的条件源码： func mapassign(t *maptype, h *hmap, key unsafe.…...

编程日记 2024/11/1 22:54:37

【论文解读】Med-BERT: 用于疾病预测的大规模结构化电子健康记录的预训练情境化嵌入

【论文解读】Med-BERT: 用于疾病预测的大规模结构化电子健康记录的预训练情境化嵌入 Med-BERT：pretrained contextualized embeddings on large-scale structured electronic health records for disease prediction 摘要：基于电子健康记录（EHR）的深度学习（DL）预…...

编程日记 2024/11/1 22:53:34

[POI2014] PTA-Little Bird（单调队列优化 DP）

luogu 传送门https://www.luogu.com.cn/problem/P3572 解题思路先设表示到的最小劳累值。很容易得出转移： 其中由和的大小关系决定，并且。很显然，直接暴力是的，会超时。于是，考虑优化。我们发现…...

编程日记 2024/11/1 22:52:33

【含开题报告+文档+PPT+源码】基于SpringBoot的体育馆管理系统的设计与实现

开题报告近年来，随着人们生活水平的提高和健康意识的增强，体育馆作为提供体育锻和休闲娱乐的重要场所，其使用频率和管理难度也在不断增加。传统的体育馆管理模式通常依赖于人工记录和手动操作，不仅效率低下，而且容易…...

编程日记 2024/11/1 22:51:32

Vue3学习：vue组件中的图片路径问题

今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。 list: [{ id: 1, name: 欧拉公式啤酒杯, price: 30.00, src: ./assets/images/Euler.png},{ id: 2, name: 高斯分布马克杯, price: 40.00, src: ./…...

编程日记 2024/11/1 22:50:31

openCV基础-图像预处理Day26

图像预处理在计算机视觉和图像处理领域，图像预处理是一个重要的步骤，它能够提高后续处理（如特征提取、目标检测等）的准确性和效率。OpenCV 提供了许多图像预处理的函数和方法，以下是一些常见的图像预处理操作&…...

编程日记 2024/11/1 22:47:28

给文件添加可读可写可执行权限

在Unix、Linux或类Unix操作系统中，你可以使用chmod命令来给文件添加可读、可写和可执行权限。权限通常分为三组：文件所有者（owner）、文件所属组（group）和其他用户（others）。每组都可…...

编程日记 2024/11/1 22:46:27

golang有序map

最近使用go开发排行榜的需求, 有些情况会用到有序map, 但是go竟然没有有序map的实现本着自己动手丰衣足食的原则, 就自己实现了一个原理原理比较简单, 主要结合了container/list双向链表和map 使用双向链表存储key和value, 保证顺序, 使用map存储key和节点信息, 保证查找…...

编程日记 2024/11/1 22:45:25

【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给自身的定位是&…...

编程日记 2024/11/1 22:42:22

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…...

编程日记 2024/11/1 22:40:21

ETLCloud怎么样？深度解析其在数据管理中的表现

在BI或数据大屏等数据分析工具中，经常需要从多个业务系统中提取原始数据，然后对数据进行清洗、处理，以获取高质量、有效且干净的数据以供后续的BI进行数据统计和分析使用，从高质量的实现企业数据的价值变现。然而，在…...

编程日记 2024/11/1 22:39:20

高频谐振功放电路

目录集电极馈电电路高频扼流圈的作用: 并联馈电回路高频扼流圈作用 : 优缺点对于并联的集电极馈电网络: 对于串联的集电极馈电网络: 神奇之处基级馈电电路自反偏压: 复合输出回路天线回路效率分析总效率分析互感如何改变工作状态集电极馈电电路馈电电路分…...

编程日记 2024/11/1 22:38:19

kafka如何获取 topic 主题的列表？

大家好，我是锋哥。今天分享关于【kafka如何获取 topic 主题的列表？】面试题？希望对大家有帮助； kafka如何获取 topic 主题的列表？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在Kafka中，可以…...

编程日记 2024/11/1 22:37:18

全新大模型框架Haystack，搭建RAG pipeline

大家好，在AI应用开发的赛道上，目前Haystack以其开源框架的优势，成为LLM技术领域的一匹黑马，对现有竞争者构成挑战。本文将介绍Haystack的亮点优势，并分析它为何能在众多LLM框架中脱颖而出，通过RAG应用实例来…...

编程日记 2024/11/1 22:36:16

儿童孤独症专家分享：了解治疗与支持的专业帮助

在儿童的成长旅程中，每一步都充满了探索与发现。然而，对于患有孤独症的儿童来说，这段旅程往往伴随着更多的挑战与困难。孤独症，这个看似遥远的词汇，却深刻地影响着无数家庭的生活。作为儿童孤独症领域的专家&#xff0…...

编程日记 2024/11/1 22:35:13

初始JavaEE篇——多线程（7）：定时器、CAS

找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程程(ಥ_ಥ)-CSDN博客所属专栏：JavaEE 目录定时器的使用定时器的原理模拟实现定时器 CAS 介绍 CAS的应用场景解析 AtomicInteger 类实现自旋锁 CAS的缺陷…...

编程日记 2024/11/1 22:34:12

高精度计算（乘）

引言此篇是专栏信息学杂谈第八篇高精度计算（乘），展示了关于C如何实现高精度乘法的代码正文： 乘法进位 c[i j - 1] a[i] * b[j] x; //x为之前进位 x c[i j - 1] / 10; c[i j - 1] % 10;完整代码： #include …...

编程日记 2024/11/1 22:32:10

在vue中如何实现跨域

跨域问题是Web开发中常见的挑战，那么如何解决跨域呢，我们一起来看看吧！ 跨域是什么？ 跨域（Cross-Origin）是指网络请求从一个域名（origin）发起，而请求的目标资源位于另一…...

编程日记 2024/11/1 22:30:09

计算机考研，选择西安交通大学还是哈工大？

C哥专业提供——计软考研院校选择分析专业课备考指南规划经过全面分析，2025年考研西安交通大学和哈尔滨工业大学计算机专业的报考难度对比如下： 西安交通大学计算机专业 > 哈尔滨工业大学计算机专业对于想要报考985高校计算机专业但核心目标是优…...

编程日记 2024/11/1 22:29:07

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

Linux-07 ubuntu 的 chrome 启动不了

文章目录问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下总结问题原因在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...

编程新知 2026/1/1 7:07:29

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录一、目的二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结一、目的当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/12/31 9:34:18

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/8/17 7:11:57