简体   繁体   中英

How to scroll to the top of a page using jQuery?

I found a code, and Im trying to do the same thing in an ASP.NET Web Forms page. Here is the code: JSFiddle in JSFiddle which works fine.

And in the HTML I tried the same thing:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="cssfile.css" rel="stylesheet" type="text/css" />        
    <script type="text/javascript">
        $(document).ready(function () {
            $(window).scroll(function () {
                if
    ($(this).scrollTop() > 50) { $('.scrollup').fadeIn(); } else {
                    $('.scrollup').fadeOut();
                }
            }); $('.scrollup').click(function () {
                $("html, body").animate({ scrollTop: 0
                }, 600); return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        Top of the page</h1>
    <textarea id="TextArea1" cols="100" rows="50"></textarea>
    <a href="#" class="scrollup">Scroll</a>
    </form>
</body>
</html>

When I execute this, the complier doesn't give me any errors but the "box" to go to the top doesn't appear.

You need to add the jquery file to the header section of the page. JSFIddle already have the jquery file in the header section.

ex

 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM