Home > Web Front-end > JS Tutorial > body text

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

coldplay.xixi
Release: 2020-12-17 14:53:14
Original
3430 people have browsed it

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);
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template