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

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

news 2025/6/19 13:13:16

背景

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

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/6/15 16:19:15

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/6/18 3:17:41

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/6/15 21:42:14

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/6/17 15:40:54

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/6/17 21:15:13

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/6/16 21:46:20

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/6/16 12:45:10

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/6/15 22:59:29

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/6/15 15:25:21