色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html 返回頂部代碼

榮姿康2年前10瀏覽0評論

HTML返回頂部功能是網站中常用的一項功能,可以方便用戶在長頁面上快速返回頂部,提高用戶體驗。實現這一功能可以通過添加“返回頂部”的鏈接,也可以使用代碼實現一個按鈕。

<button onclick="topFunction()" id="myBtn">返回頂部</button>
<script>
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

上面的代碼是實現返回頂部按鈕的基本代碼,其中onclick屬性綁定了topFunction()函數,點擊按鈕即可觸發該函數。函數中使用了scrollTop屬性,將頁面滾動條的位置設置為0,即回到頂部。

為了讓用戶更容易發現這個按鈕,可以在頁面滾動一定高度后顯示該按鈕,在頁面滾動到頂部或者頁面高度不足以滾動時隱藏該按鈕。

<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #777;
}
</style>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop >20 || document.documentElement.scrollTop >20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
</script>

上面的代碼在樣式中設置了按鈕的一些基本屬性,比如位置、顏色、大小等。在JS代碼中通過onscroll事件監聽頁面滾動,如果頁面滾動高度大于20像素,則顯示該按鈕,否則隱藏。

以上是HTML中返回頂部功能的基本代碼,可以根據需求自行進行修改和擴展。