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.
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>
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>
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; }
RELATED POSTS:
No comments:
Post a Comment