Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery Scroll to top button,Back to top button option on webpage in asp.net

Jul 24, 2012
Introduction:

In this article I will explain how to show Back to Top or Scroll To Top button option in website using JQuery when user scroll down webpage in asp.net.
Description:
  
In previous posts I explained many articles relating to JQuery. Now I will explain how to show Back to Top or Scroll To Top button options in website when users scroll down webpage. In many sites we will see option like Back to Top or Scroll To Top button option when we scroll the webpage down this type of functionality we can implement easily by using JQuery when scrollbar top position greater than certain value. To implement this one write the code as shown below

<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>scroll to top of page using jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

<style type="text/css">
body {
font: .88em/150% Arial, Helvetica, sans-serif;
margin: 30px auto;
}
#pagewrap {
margin: 0 auto;
width: 600px;
padding-left: 150px;
position: relative;
}
/*Back to top button*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>
</head>

<body id="top">
<div id="pagewrap">
<h1>Aspdotnet-Suresh Demo</h1>
<div style="height:1500px"></div>
<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>
</div>
</body>
</html>
If you observe script in header section of code here we are showing the Scroll To Option when windows scroller top postion is greater than 100. If windows scroller postion less than 100 we are hiding Scroll To Option.

Demo

If you want check live demo check this site Scroll To Top Button Option

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.