html中如何寫“返回頂部按鈕”？

var topBtn = document.getElementById('top');
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
    // 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滾動超過一屏，返回頂部按鈕出現(xiàn)，反之隱藏
    if(toTop>=winHeight){
        topBtn.style.display = 'block';
    }else {
        topBtn.style.display = 'none';
    }
}
topBtn.onclick=function () {
    var timer = setInterval(function () {
        var toTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 判斷是否到達(dá)頂部，到達(dá)頂部停止?jié)L動，沒到達(dá)頂部繼續(xù)滾動
        if(toTop == 0){
            clearInterval(timer);
        }else {
            // 設(shè)置滾動速度
            var speed = Math.ceil(toTop/5);
            // 頁面向上滾動
            document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
        }
    },50);
}

大家介紹如何通過 JS/CSS 實現(xiàn)網(wǎng)頁返回頂部效果。

CSS 按鈕樣式：

#myBtn {

display: none; /* 默認(rèn)隱藏 */

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; /* 圓角 */

}

到頂部的功能現(xiàn)在基本上是網(wǎng)頁的標(biāo)配了，當(dāng)你已經(jīng)瀏覽到頁面底部時，一鍵返回頂部的功能確實非常方便。隨著用戶習(xí)慣的養(yǎng)成，這個功能都是頁面必備的。那么作為一個前端開發(fā)者，我們?nèi)绾螌崿F(xiàn)這個實用又酷炫的功能呢？今天小編幫大家匯總了五種實現(xiàn)方法，覺得有用記得點贊，轉(zhuǎn)發(fā)哦。

1.錨點

使用錨點鏈接是一種簡單的返回頂部的功能實現(xiàn)。該實現(xiàn)主要在頁面頂部放置一個指定名稱的錨點，然后在頁面下方放置一個返回到該錨點的鏈接，用戶點擊該鏈接即可返回到該錨點所在的位置。原理和實現(xiàn)都很簡單，核心就是通過錨點跳轉(zhuǎn)到指定元素位置，然后把要跳轉(zhuǎn)的元素放到頁面頂部。

2.scrollTop

scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素數(shù)。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大于0，且表示元素上方不可見內(nèi)容的像素寬度。可以利用scrollTop來實現(xiàn)回到頂部的功能，修改body的scrollTop。示例如下：

3.scrollTo()

scrollTo(x,y)是js原生的方法，作用是滾動當(dāng)前window中顯示的文檔至（x,y）點。這是很常用的一種方法，設(shè)置scrollTo(0,0)就可以實現(xiàn)回到頂部的效果。示例如下：

4.scrollBy()

scrollBy(x,y)方法滾動當(dāng)前window中顯示的文檔，x和y指定滾動的相對量。只要把當(dāng)前頁面的滾動長度作為參數(shù)，逆向滾動，則可以實現(xiàn)回到頂部的效果。

5.scrollIntoView()

Element.scrollIntoView方法可以滾動當(dāng)前元素，使其進(jìn)入瀏覽器的可見區(qū)域。該方法可以接受一個布爾值作為參數(shù)。如果為true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對齊（前提是當(dāng)前區(qū)域可滾動）；如果為false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對齊（前提是當(dāng)前區(qū)域可滾動）。如果沒有提供該參數(shù)，默認(rèn)為true。

使用該方法的原理與使用錨點的原理類似，在頁面最上方設(shè)置目標(biāo)元素，當(dāng)頁面滾動時，目標(biāo)元素被滾動到頁面區(qū)域以外，點擊回到頂部按鈕，使目標(biāo)元素重新回到原來位置，則達(dá)到預(yù)期效果。

關(guān)于實現(xiàn)回到頂部功能的方法就和大家分享到這里，希望能對你的工作有幫助。如果你覺得本篇文章對你有幫助，歡迎點贊，評論，轉(zhuǎn)發(fā)。

在線咨詢

上一篇：Kbone，十分鐘讓 Vue 項目同時支持小程序
下一篇：肖sir_html之基本使用（1）

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。