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.
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
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
|
<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 Email
|
|||
4 comments :
How to make image popup or video popup
@Suresh...
Check this post
http://www.aspdotnet-suresh.com/2011/12/jquery-fancy-zoom-effect-for-image-in.html
Hi Suresh,
Can you send posts on LINQ Technology?
i have a grid which is in update panel with timer(7 sec) i want to fixed the scroll with my requirement.but after 7sec it is go back to the previous position but i want to stop this.what can i do.i use,
MaintainScrollPositionOnPostback="true" but it will not work.
Note: Only a member of this blog may post a comment.