Home > Article > Web Front-end > How to quickly scroll to the top of the page with jQuery
How to quickly scroll to the top of the page with jQuery: Use the [scrollTo()] method to quickly scroll to the top of the page. Setting the position parameter to 0 will scroll the page to the top. The syntax is [$(window).scrollTop (position);].
The operating environment of this tutorial: windows7 system, jquery3.2.1 version. This method is suitable for all brands of computers.
Recommended: jquery video tutorial
How to quickly scroll to the top of the page with jQuery:
You can use scrollTo in jQuery () method quickly scrolls to the top of the page. jQuery's scrollTo() method is used to set or return the vertical scroll bar position of the selected element. You can use this behavior to scroll to the top of the page by applying this method on the window property; simply setting the position parameter to 0 will scroll the page to the top.
Syntax:
$(window).scrollTop(position);
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.scroll {
height: 1000px;
background-color: palegoldenrod;
}
</style>
</head>
<h2>使用jQuery快速滚动到页面顶部</h2>
<p>单击下面的按钮，滚动到页面顶部</p>
<p class="scroll">这里一段测试文本！这里一段测试文本！这里一段测试文本！</p>
<button onclick="scrollToTop()">单击，滚动到顶部</button>
<script src= "https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script>
function scrollToTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>At the bottom of the page, before clicking the button:
Click the button After:
##Related free learning recommendations: javascript learning tutorial
The above is the detailed content of How to quickly scroll to the top of the page with jQuery. For more information, please follow other related articles on the PHP Chinese website!