search

Home >Web Front-end >JS Tutorial >How to quickly scroll to the top of the page with jQuery

How to quickly scroll to the top of the page with jQuery

coldplay.xixi
coldplay.xixiOriginal
2020-12-17 14:53:143452browse

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);].

How to quickly scroll to the top of the page with jQuery

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:

How to quickly scroll to the top of the page with jQuery

Click the button After:

How to quickly scroll to the top of the page with jQuery

##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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use toggle in jqueryNext article：How to use toggle in jquery

Related articles

See more