CSS實現(xiàn)回到頂部且平滑過渡
發(fā)布時間：2024-10-28 14:53:46 作者：不做超級小白 
我要評論
我要評論本文主要介紹了在網(wǎng)頁開發(fā)中如何實現(xiàn)“回到頂部”的功能,通過HTML和CSS的編寫,可以實現(xiàn)一個浮動在頁面右下角的小圖標,點擊后即可回到頁面頂部,這種設計可以提高網(wǎng)站的可用性,尤其在移動設備上,用戶只需輕輕一按就能回到開始閱讀的位置
背景
最近同學在項目開發(fā)的時候問了我一個問題：小白，回到頂部該怎么做呀？我當時就愣住了，心想這不是很基礎的一個功能嗎，然后想到該同學沒有系統(tǒng)學過網(wǎng)頁三劍客，我就給他講了該怎么實現(xiàn)這個雖然基礎但在很多項目中都很實用的功能。
不過我還是笑了，為啥，因為我不允許還有人不會這個聽起來貌似高大上的回到頂部，所以我選擇更一篇。（大佬繞道 /plea手）
基本介紹
本文僅介紹回到頂部功能的CSS做法（畢竟這么簡單沒有特別的需求都能用） 。
后續(xù)或許會出涉及JS的用法
什么是回到頂部按鈕？
回到頂部按鈕是一個浮動在頁面右下角的小圖標，用戶點擊后可以立即返回到頁面的頂部。這種設計可以有效地提高網(wǎng)站的可用性，尤其是在移動設備上，用戶只需輕輕一按就能回到開始閱讀的位置。
代碼實現(xiàn)
以下是實現(xiàn)回到頂部效果的 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；需要自己添加足夠多能出現(xiàn)滾動條的內容 */
</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);
/* 呈現(xiàn)立體效果 */
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到的位置。
總結
等一個課代表評論區(qū)總結，笑。
到此這篇關于CSS實現(xiàn)回到頂部且平滑過渡的文章就介紹到這了,更多相關css平滑過渡到頂部內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了CSS+HTML 實現(xiàn)頂部導航欄功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-24
css之粘性sticky布局實現(xiàn)題頭定位在頂部的方法
這篇文章主要介紹了css之粘性sticky布局實現(xiàn)題頭定位在頂部的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2021-02-04
這篇文章主要介紹了css錨點定位被頂部固定導航欄遮住的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-04-09- 這篇文章主要介紹了CSS 返回頂部代碼示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-11
純CSS實現(xiàn)微信小程序仿QQ頂部提示彈框動畫效果
這篇文章主要介紹了純CSS實現(xiàn)微信小程序仿QQ頂部提示彈框動畫效果,需要的朋友可以參考下2018-09-10- 返回頂部圖標固定在瀏覽器的右下角的相關文章可以在網(wǎng)上找到很多，但是同時兼容ie6的就不多了，本例為大家介紹的這段css樣式代碼就是可以兼容ie6的，感興趣的朋友可以參考2013-10-20
- 這是關于實現(xiàn)css固定div層在頁面頂部,css固定div層在頁面底部的代碼，兼容IE6，有時需要把一個元素固定在頁面的某個部位，本文將詳細介紹，需要了解的朋友可以參考下2012-12-07
