如何使用JavaScript滚动到页面顶部?

在滚动页面中如何使用JavaScript滚动到页面顶部?下面本篇文章就来给大家介绍一下使用JavaScript滚动到页面顶部的方法,希望对大家有所帮助。

在JavaScript中可以使用window.scrollTo()在滚动页面中滚动到页面顶部,scrollTo() 方法可把内容滚动到指定的坐标。

window接口的scrollTo()方法可用于滚动到页面上的指定位置。它接受要滚动到的页面的x和y坐标的两个参数。以0的形式传递这两个参数将滚动页面到最上面和最左边的点。

语法:

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-600

点击按钮后:

3fbf3519c55c7a473bb8b1cc29f70ab.png-600

以上就是如何使用JavaScript滚动到页面顶部?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 答疑