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.

Upvotes: 0

Views: 51

Answers (1)

DeepakJ
DeepakJ

Reputation: 388

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">

Upvotes: 1

Related Questions