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

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

news 2026/5/20 20:22:22

背景

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

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

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

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

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

扩容 在 Go 语言中&#xff0c;当 map 的元素数量达到一定阈值时&#xff0c;会触发扩容操作以保持性能。这个过程称为 rehashing&#xff0c;即重新散列所有的键值对到一个更大的哈希表中。 扩容的条件 源码&#xff1a; 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 解题思路 先设 表示到 的最小劳累值。 很容易得出转移&#xff1a; 其中 由 和 的大小关系决定&#xff0c;并且 。 很显然&#xff0c;直接暴力是 的&#xff0c;会超时。 于是&#xff0c;考虑优化。 我们发现…...

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

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

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

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

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

今天在做一个案例的时候&#xff0c;图片放在assets/images文件夹下&#xff0c;如下路径&#xff0c;其中的图片不能正常显示。 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

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

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

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

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

编程日记 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&#xff08;顺序链&#xff09;2-4、Router Chain 总结 前言 LangChain给自身的定位是&…...

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

51c嵌入式~IO合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/12383193 一、单片机通信数据接收解析方法 前阵子一朋友使用单片机与某外设进行通信时&#xff0c;外设返回的是一堆格式如下的数据&#xff1a; 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或数据大屏等数据分析工具中&#xff0c;经常需要从多个业务系统中提取原始数据&#xff0c;然后对数据进行清洗、处理&#xff0c;以获取高质量、有效且干净的数据以供后续的BI进行数据统计和分析使用&#xff0c;从高质量的实现企业数据的价值变现。 然而&#xff0c;在…...

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

高频谐振功放电路

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

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

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

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

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

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

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

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

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

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

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

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

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

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

高精度计算（乘）

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

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

在vue中 如何实现跨域

跨域问题是Web开发中常见的挑战&#xff0c;那么如何解决跨域呢&#xff0c;我们一起来看看吧&#xff01; 跨域是什么&#xff1f; 跨域&#xff08;Cross-Origin&#xff09;是指网络请求从一个域名&#xff08;origin&#xff09;发起&#xff0c;而请求的目标资源位于另一…...

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

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

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

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

Unity交通仿真入门：从零到一搭建十字路口红绿灯与车辆AI（附完整C#源码）

Unity交通仿真实战&#xff1a;十字路口红绿灯与车辆AI开发指南 在游戏开发和城市模拟领域&#xff0c;交通仿真一直是个充满挑战又极具实用价值的课题。想象一下&#xff0c;你正站在一个繁忙的十字路口&#xff0c;观察着红绿灯有节奏地变换&#xff0c;车辆井然有序地通过—…...

编程新知 2026/5/20 20:09:34

教育机构开设AI课程，如何用Taotoken为学生提供稳定实验环境

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 教育机构开设AI课程&#xff0c;如何用Taotoken为学生提供稳定实验环境 在高校或培训机构开设大模型应用相关课程时&#xff0c;一…...

编程新知 2026/5/20 19:44:25

网盘直链下载助手完整教程：免费获取八大平台真实下载地址，告别限速烦恼

网盘直链下载助手完整教程&#xff1a;免费获取八大平台真实下载地址&#xff0c;告别限速烦恼 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里…...

编程新知 2026/5/20 18:50:07

蓝桥杯省赛真题解析：用动态规划搞定‘积木画’问题（附Python/Java/C++三种代码）

蓝桥杯竞赛实战&#xff1a;动态规划解积木画问题的多语言实现 第一次参加蓝桥杯的选手往往会被"积木画"这类动态规划题目难住——看似简单的图形拼接背后隐藏着精妙的状态转移逻辑。这道题考察的不仅是编码能力&#xff0c;更是对问题抽象和数学建模的深刻理解。本文…...

编程新知 2026/5/20 16:47:57

CTF新手必看：一张图里藏了啥？手把手教你用010 Editor秒解BUUCTF图片隐写题

CTF新手入门&#xff1a;从图片隐写题中快速提取Flag的实战指南 当你第一次接触CTF比赛中的图片隐写题时&#xff0c;可能会感到无从下手。那些看似普通的图片背后&#xff0c;往往藏着关键的Flag信息。本文将带你一步步破解BUUCTF平台上的典型图片隐写题&#xff0c;使用010 E…...

编程新知 2026/5/20 16:18:32

5步掌握BG3SE：让《博德之门3》成为你的创意画布

5步掌握BG3SE&#xff1a;让《博德之门3》成为你的创意画布 【免费下载链接】bg3se Baldurs Gate 3 Script Extender 项目地址: https://gitcode.com/gh_mirrors/bg/bg3se BG3SE&#xff08;博德之门3脚本扩展器&#xff09; 是一款革命性的开源工具&#xff0c;它通过L…...

编程新知 2026/5/20 14:21:20

MaterialSkin架构解析：现代化WinForms界面重构的技术实现

MaterialSkin架构解析&#xff1a;现代化WinForms界面重构的技术实现 【免费下载链接】MaterialSkin Theming .NET WinForms, C# or VB.Net, to Googles Material Design Principles. 项目地址: https://gitcode.com/gh_mirrors/mat/MaterialSkin MaterialSkin是一个专为…...

编程新知 2026/5/20 14:10:58

Label Studio终极指南：高效构建多模态数据标注平台

Label Studio终极指南&#xff1a;高效构建多模态数据标注平台 【免费下载链接】label-studio Label Studio is a multi-type data labeling and annotation tool with standardized output format 项目地址: https://gitcode.com/GitHub_Trending/la/label-studio 在人…...

编程新知 2026/5/20 13:25:53

企业级应用如何借助Taotoken实现大模型API的容灾与负载均衡

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 企业级应用如何借助Taotoken实现大模型API的容灾与负载均衡 在构建依赖大模型能力的企业级应用时&#xff0c;服务的连续性与稳定性…...

编程新知 2026/5/20 12:59:46

Pixelle-Video：如何让AI为您的声音创作注入灵魂？

Pixelle-Video&#xff1a;如何让AI为您的声音创作注入灵魂&#xff1f; 【免费下载链接】Pixelle-Video &#x1f680; AI 全自动短视频引擎 | AI Fully Automated Short Video Engine 项目地址: https://gitcode.com/GitHub_Trending/pi/Pixelle-Video 在AI视频创作的…...

编程新知 2026/5/20 12:18:43