這篇文章給大家分享的是有關(guān)如何通過JS/CSS實現(xiàn)網(wǎng)頁返回頂部效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為贊皇等服務(wù)建站，贊皇等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為贊皇企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

CSS 按鈕樣式：

#myBtn {

display: none; /* 默認隱藏 */

position: fixed;

bottom: 20px;

right: 30px;

z-index: 99;

border: none;

outline: none;

background-color: red; /* 設(shè)置背景顏色，你可以設(shè)置自己想要的顏色或圖片 */

color: white; /* 文本顏色 */

cursor: pointer;

padding: 15px;

border-radius: 10px; /* 圓角 */

}

#myBtn:hover {

background-color: #555;

}

JS 代碼：

// 當網(wǎng)頁向下滑動 20px 出現(xiàn)"返回頂部" 按鈕

window.onscroll = function() {scrollFunction()};

function scrollFunction() {console.log(121);

if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

document.getElementById("myBtn").style.display = "block";

} else {

document.getElementById("myBtn").style.display = "none";

}

}

// 點擊按鈕，返回頂部

function topFunction() {

document.body.scrollTop = 0;

document.documentElement.scrollTop = 0;

}

感謝各位的閱讀！關(guān)于“如何通過JS/CSS實現(xiàn)網(wǎng)頁返回頂部效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！