CSS實(shí)現(xiàn)回到頂部且平滑過渡
我要評(píng)論背景
最近同學(xué)在項(xiàng)目開發(fā)的時(shí)候問了我一個(gè)問題：小白，回到頂部該怎么做呀？我當(dāng)時(shí)就愣住了，心想這不是很基礎(chǔ)的一個(gè)功能嗎，然后想到該同學(xué)沒有系統(tǒng)學(xué)過網(wǎng)頁(yè)三劍客，我就給他講了該怎么實(shí)現(xiàn)這個(gè)雖然基礎(chǔ)但在很多項(xiàng)目中都很實(shí)用的功能。
不過我還是笑了，為啥，因?yàn)槲也辉试S還有人不會(huì)這個(gè)聽起來貌似高大上的回到頂部，所以我選擇更一篇。（大佬繞道 /plea手）
基本介紹
本文僅介紹回到頂部功能的CSS做法（畢竟這么簡(jiǎn)單沒有特別的需求都能用） 。
后續(xù)或許會(huì)出涉及JS的用法
什么是回到頂部按鈕？
回到頂部按鈕是一個(gè)浮動(dòng)在頁(yè)面右下角的小圖標(biāo)，用戶點(diǎn)擊后可以立即返回到頁(yè)面的頂部。這種設(shè)計(jì)可以有效地提高網(wǎng)站的可用性，尤其是在移動(dòng)設(shè)備上，用戶只需輕輕一按就能回到開始閱讀的位置。
代碼實(shí)現(xiàn)
以下是實(shí)現(xiàn)回到頂部效果的 HTML 和 CSS 代碼示例，功能以外的樣式從簡(jiǎn)處理。
<!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;
}
/* 滾動(dòng)條樣式 */
/* 定義滾動(dòng)條寬度和背景顏色 */
::-webkit-scrollbar {
width: 8px;
background-color: #F5F5F5;
}
/* 定義滾動(dòng)條軌道的陰影和圓角 */
::-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">我是標(biāo)題</h1>
<div id="content">
<p id="a">我是內(nèi)容</p>
<p>我是內(nèi)容</p>
<p>我是內(nèi)容</p>
<p>我是內(nèi)容</p>
/* p{我是內(nèi)容}*100；需要自己添加足夠多能出現(xiàn)滾動(dòng)條的內(nèi)容 */
</div>
<a href="#index" id="to_top_ball">↑</a>
</div>
</body>
</html>重點(diǎn)代碼
平滑過渡
很多人會(huì)嫌CSS做的回到頂部太過于生澀，點(diǎn)一下它就直接跳到目標(biāo)錨點(diǎn)了，然后紛紛選擇使用JS，但事實(shí)的確如此嗎？CSS真的做不了平滑過渡的拉動(dòng)效果嗎？當(dāng)然不！ 一行CSS樣式設(shè)置讓你對(duì)它刮目相看。
html,
body {
/* ...other codes... */
scroll-behavior: smooth;/* 平滑過渡效果 */
}#to_top_ball
#to_top_ball {
/* 球內(nèi)內(nèi)容水平垂直居中法一 */
display: block;
text-align: center;
line-height: 60px;
/* 球內(nèi)內(nèi)容水平垂直居中法二 */
/* 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);
/* 呈現(xiàn)立體效果 */
box-shadow: 0 0 20px 0 rgba(0, 0, 255, .5);
/* 固定定位，相對(duì)窗口 */
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的內(nèi)容控制
#to_top_ball {
/* 球內(nèi)內(nèi)容水平垂直居中法一 */
display: block;
text-align: center;
line-height: 60px;
/* 球內(nèi)內(nèi)容水平垂直居中法二 */
/* display: flex;
justify-content: center;
align-items: center; */
/* ...other codes... */
}主要知識(shí)點(diǎn)
主要利用了a標(biāo)簽的href屬性與其他標(biāo)簽的id屬性進(jìn)行配合
Q&A
Ⅰ
Q：a標(biāo)簽的href屬性與其他標(biāo)簽的class屬性進(jìn)行配合可以嗎？
A：當(dāng)然肯定必須不行呀，舉個(gè)例子，你喝完孟婆湯之后被帶到了一個(gè)分叉路口，前面四五個(gè)指示牌都是羅馬，這你怎么走，一不小心選錯(cuò)就變牛馬…
Ⅱ
Q：a標(biāo)簽href屬性的值我可以寫#top嗎？
A：當(dāng)然肯定必須可以呀，只要想達(dá)到的效果是回到當(dāng)前頁(yè)面頂部就行，自己寫帶id的元素只是可以更靈活控制scroll到的位置。
總結(jié)
等一個(gè)課代表評(píng)論區(qū)總結(jié)，笑。
到此這篇關(guān)于CSS實(shí)現(xiàn)回到頂部且平滑過渡的文章就介紹到這了,更多相關(guān)css平滑過渡到頂部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS+HTML 實(shí)現(xiàn)頂部導(dǎo)航欄功能
這篇文章主要介紹了CSS+HTML 實(shí)現(xiàn)頂部導(dǎo)航欄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-24
css之粘性sticky布局實(shí)現(xiàn)題頭定位在頂部的方法
這篇文章主要介紹了css之粘性sticky布局實(shí)現(xiàn)題頭定位在頂部的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2021-02-04
css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案
這篇文章主要介紹了css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-04-09- 這篇文章主要介紹了CSS 返回頂部代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-11
純CSS實(shí)現(xiàn)微信小程序仿QQ頂部提示彈框動(dòng)畫效果
這篇文章主要介紹了純CSS實(shí)現(xiàn)微信小程序仿QQ頂部提示彈框動(dòng)畫效果,需要的朋友可以參考下2018-09-10css返回頂部圖標(biāo)固定在瀏覽器右下角且兼容ie6
返回頂部圖標(biāo)固定在瀏覽器的右下角的相關(guān)文章可以在網(wǎng)上找到很多，但是同時(shí)兼容ie6的就不多了，本例為大家介紹的這段css樣式代碼就是可以兼容ie6的，感興趣的朋友可以參考2013-10-20css 固定頂部 怎么用css定義一個(gè)固定在頁(yè)面頂部的層
這是關(guān)于實(shí)現(xiàn)css固定div層在頁(yè)面頂部,css固定div層在頁(yè)面底部的代碼，兼容IE6，有時(shí)需要把一個(gè)元素固定在頁(yè)面的某個(gè)部位，本文將詳細(xì)介紹，需要了解的朋友可以參考下2012-12-07
