Hi, today i am going to tell you how we place the scroll to Top button in your website, we have seen many websites and it is very simple to do this , i have done this Website Scroll to Top using jQuery, it's just few lines of code.
HTML
take one div and give it name scrollTop
<div class="scrollTop"> <img src="jquery_scroll_icon.png" width="97" height="97"> </div>
CSS
style the scrollTop element element position to be fixed and set the margins at bottom and right side
<style type="text/css">
.scrollTop{position:fixed; bottom:20px; right:10px; cursor:pointer;}
</style>
Javascript
write the click function to scrollTop div and animate the entire website it means the total website store in body tag, use body tag as a selector and assign animate() method and write scrillTop property set to 0, when we click on button it will take to 0 position of body
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scrollTop').click(function(){
$('body').animate({scrollTop: '0px',easing: "easein"}, 500);
});
});
</script>
Live Demo Download Script
not scroll
ReplyDeletestill not working .................
ReplyDeletein IE8， i use $(document).scrollTop() to get the scrollTop property, $('body').scrollTop() or $('html').scrollTop() will always return 0.
ReplyDeleteMaybe you can use
$(document).animate({scrollTop: 0}, 0);
$('html,body').animate({scrollTop: 0}, 0);
http://www.jqueryjohn.com/2014/02/scroll-to-top-of-the-page-using-jquery.html
ReplyDeleterefer this site. it works fine.