背景
最近同学在项目开发的时候问了我一个问题：小白，回到顶部该怎么做呀？我当时就愣住了，心想这不是很基础的一个功能吗，然后想到该同学没有系统学过网页三剑客，我就给他讲了该怎么实现这个虽然基础但在很多项目中都很实用的功能。
不过我还是笑了，为啥，因为我不允许还有人不会这个听起来貌似高大上的回到顶部，所以我选择更一篇。（大佬绕道 /plea手）
基本介绍
本文仅介绍回到顶部功能的CSS做法（毕竟这么简单没有特别的需求都能用） 。
后续或许会出涉及JS的用法
什么是回到顶部按钮？
回到顶部按钮是一个浮动在页面右下角的小图标，用户点击后可以立即返回到页面的顶部。这种设计可以有效地提高网站的可用性，尤其是在移动设备上，用户只需轻轻一按就能回到开始阅读的位置。
代码实现
以下是实现回到顶部效果的 HTML 和 CSS 代码示例，功能以外的样式从简处理。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <title>back-to-top-demo</title> /* 通配 */ * { 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); }<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> |
重点代码
平滑过渡
很多人会嫌CSS做的回到顶部太过于生涩，点一下它就直接跳到目标锚点了，然后纷纷选择使用JS，但事实的确如此吗？CSS真的做不了平滑过渡的拉动效果吗？当然不！ 一行CSS样式设置让你对它刮目相看。
1 2 3 4 5 | html,body { /* ...other codes... */ scroll-behavior: smooth;/* 平滑过渡效果 */} |
#to_top_ball
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | #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的内容控制
1 2 3 4 5 6 7 8 9 10 11 | #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实现回到顶部且平滑过渡的文章就介绍到这了,更多相关css平滑过渡到顶部内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
我是内容
我是内容
我是内容
我是内容
/* p{我是内容}*100；需要自己添加足够多能出现滚动条的内容 */
