In this short code snippet article I will explain, how to implement Scrolling back to Top Button using plain jQuery and no additional jQuery Plugins.
In order to make the Scrolling back to Top action smooth, jQuery animation has been used.
 
HTML Markup and Implementation
I have added some text to the page so that I can illustrate the Scrolling back to Top functionality.
At the bottom, there’s an HTML Anchor with ID scrollToTop. This element when clicked will smoothly scroll the page back to the top and in order to achieve this I have added a jQuery OnClick event handler for the element.
The CSS styles for the page as well as the scrollToTop element has been placed within the HEAD section of the page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        #scrollToTop
        {
             cursor:pointer;
             background-color:#0090CB;
             display:inline-block;
             height:40px;
             width:40px;
             color:#fff;
             font-size:16pt;
             text-align:center;
             text-decoration:none;
             line-height:40px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type = "text/javascript">
        $(function () {
            $('#scrollToTop').bind("click", function () {
                $('html, body').animate({ scrollTop: 0 }, 1200);
                return false;
            });
        });
    </script>
</head>
<body>
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
<div align = "right">
<a href="javascript:;" id="scrollToTop">&#x25B2;</a>
</div>
</body>
</html>
 
Implement jQuery Scroll to Top Button with Animated and Smooth Scrolling
 
Demo
View demo
 
Downloads
Download Code