首頁 > web前端 > 前端問答 > react怎麼實作回到頂部

react怎麼實作回到頂部

藏色散人
發布: 2022-12-30 10:29:02
原創
3045 人瀏覽過

react實作傳回頂端的方法:1、建立一個函數式元件「ScrollDemo.js」;2、建立一個button,並透過程式碼「function handleScroll(){document.body.scrollTop = document.documentElement .scrollTop = 0;}”實現返回頂部效果即可。

react怎麼實作回到頂部

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼實現返回頂部?

知識準備:

scrollTop代表被隱藏在內容區域上方的像素數,當元素未捲動時, scrollTop為0,如果元素垂直滾動了,scrollTop的值增加

目標效果:

想要實現點擊”回到頂部“按鈕以後可以回到scrollTop為0的地方,也就是頂部。

react怎麼實作回到頂部

下面建立一個函數式元件ScrollDemo.js。並在裡面寫入關鍵程式碼,一個button,點擊時呼叫HandleScroll方法。 button用的fixed定位

<button
                onClick={handleScroll}
                style={{
                    position: &#39;fixed&#39;,
                    top: &#39;320px&#39;,
                    right: &#39;0&#39;,
                    width: &#39;50px&#39;,
                    height: &#39;50px&#39;,
                    zIndex:&#39;3&#39;,
                    backgroundImage: &#39;linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)&#39;,
                    border:&#39;0&#39;,
                    transition:&#39;all 1s&#39;
            }}>回到顶部</button>
function handleScroll(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
登入後複製

react怎麼實作回到頂部

推薦學習:《react影片教學

以上是react怎麼實作回到頂部的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板