如何使用jQuery跳转到浏览器页面的顶部

如何使用jQuery跳转到浏览器页面的顶部

当网站在一个页面上包含大量的数据,并且在往下看的时候,如果用户想看到主要的内容,即浏览器页面的顶部,而不需要滚动,这可以通过使用jQuery实现。

例子。跳到浏览器页面的顶部

<html>
<head>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
     <script>
         (function () 
         {
             ('#Top').click(function () 
             {
                 $('html, body').animate(
                     {
                     scrollTop: '0px'
                 },
                 1500);
                 return false;
             });
         });
    </script>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Welcome to GeeksforGeeks</h2>
        <h4>Glad to see you!!</h4>
        <h5>A Computer Science portal for the geeks.</h5>
        <p>It is the complete portal for learning in Computer Science field.</p>
        <p>GeeksforGeeks portal contain every basic to hard knowledge regarding
        Computer Science field.</p>
        <p>You can also share interview experience here to help other geeks.</p>
        <p>It also focuses on GATE, provides notes, previous year question papers,
        last minute notes, etc.</p>
        <p>GeeksforGeeks provides opportunity for the geeks to contribute
        and help other geeks.</p>
        <a id="scrlTop" href="#">Scroll to Top</a>
    </center>
</body>
</html>

输出 :

在点击 “滚动到顶部 “之前
如何使用jQuery跳转到浏览器页面的顶部?
如何使用jQuery跳转到浏览器页面的顶部?

点击 “滚动到顶部 “后
如何使用jQuery跳转到浏览器页面的顶部?

在上面的例子中,当我们点击 “滚动到顶部 “链接时,它会自动跳到浏览器页面的顶部。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程