The code is very minimal but powerful,we can add a simple link or button.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Scroll to Top</title>
<script type='text/javascript'>
$(document).ready(function () {
//hide the "Scoll to Top" link
$("#toTop").hide().removeAttr("href");
// Add click function to link for scroll the page on top
$("#toTop").click(function () {
$("html, body").animate({ scrollTop: 0 }, "slow");
});
// add function on scroll event of window to show and hide the link
$(window).scroll(function () {
if ($(window).scrollTop() == "0") {
$("#toTop").fadeOut("slow")
}
else {
$("#toTop").fadeIn("slow")
}
});
});
</script>
<style type="text/css">
#GoTop
{
background: none repeat scroll 0 0 #b6ff00;
border: 2px solid #ffffff;
bottom: 5px;
padding: 10px;
position: fixed;
right: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
Demo : Scroll to Top
</p>
<p>
Demo : Scroll to Top
</p>
<p>
Demo : Scroll to Top
</p>
<p>
<a href='#' id="GoTop">Go To Top</a>
</p>
</div>
</form>
</body>
</html>