Animated scroll to top by using Jquery | 2my4edge

08 August 2013

Animated scroll to top by using Jquery

Animated Scroll to top by using JQuery is one the simple technique, here we going to see that. how i made this with simple coding. this back to top or scroll to top is mostly used for the purpose of going down to the page by scrolling. and have go back to the top of the page. so for we are using this scroll back to top. and most of them using short cut key i.e CTRL+HOME using to go for top of the page. but here we are using by click automatically go to top of the page. with smooth scrolling effect.
animated scroll to top
DOWNLOAD             LIVE DEMO
and last few posts, we had seen developing side programs, so now for small change, we are coming to see the designing side. in the designing we are using css and Jquery for animated scroll back to top tutorial. so let we see the coding

LINK TO TOP
<a href="#" class="top"></a>
give a class name to the anchor tag.

SCRIPT
<script src="jquery-1.8.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){

//display the scroll top button if the browser is overflow with scroll. 
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.top').fadeIn();
} else {
$('.top').fadeOut();
}
});

//Click to scroll to top and 1500 is speed you can change it 
$('.top').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
</script>
the above is the script for Scroll to top, the first function is check whether the browser is getting overflow or get scroll, if the browser get scroll the fadein, fadeout operation will occurs to show the button.
and the second function is to get back top of the page and the animate({scrollTop : 0 }, 1500); is scrollTop to 0 position and the 1500 is for speed of scrolling. you can change is as your wish.

CSS
.top {
height:50px;
width:50px;
text-decoration: none;
position:fixed;
top:550px;
right:40px;
display:none;
background-image:url(to-top.png);
background-repeat:no-repeat;
}
the above is Css for that. here i call the background image as to display in the browser. that is it.


RELATED POSTS:










No comments:

Post a Comment

^