如何使用JavaScript滾動到頁面頂部?

在滾動頁面中如何使用JavaScript滾動到頁面頂部?下面本篇文章就來給大家介紹一下使用JavaScript滾動到頁面頂部的方法,希望對大家有所幫助。

image

在JavaScript中可以使用window.scrollTo()在滾動頁面中滾動到頁面頂部,scrollTo() 方法可把內(nèi)容滾動到指定的坐標。

window接口的scrollTo()方法可用于滾動到頁面上的指定位置。它接受要滾動到的頁面的x和y坐標的兩個參數(shù)。以0的形式傳遞這兩個參數(shù)將滾動頁面到最上面和最左邊的點。

語法:

window.scrollTo(x-coordinate, y-coordinate)

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
    .scroll { 
        height: 1000px; 
        background-color: lightgreen; 
    }
</style> 

</head>

<h2 style="color: green">使用JavaScript滾動到頁面頂部</h2> 
    <p>單擊按鈕,滾動到頁面頂部</p> 

    <p class="scroll">這里一段測試文本!這里一段測試文本!這里一段測試文本!</p> 

    <button onclick="scrollToTop()">單擊,滾動到頂部</button> 
    <script> 
        function scrollToTop() { 
            window.scrollTo(0, 0); 
        } 
    </script> 
</body> 

</html>

在單擊按鈕之前:

66dfb430ac2453a473e8afd6b214084.png

點擊按鈕后:

3fbf3519c55c7a473bb8b1cc29f70ab.png

原文地址:如何使用JavaScript滾動到頁面頂部?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容