Website Scroll to Top using jQuery | Lessoncup Programming Blog

Saturday, 9 November 2013

Website Scroll to Top using jQuery

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

4 comments :

  1. still not working .................

    ReplyDelete
  2. in IE8, i use $(document).scrollTop() to get the scrollTop property, $('body').scrollTop() or $('html').scrollTop() will always return 0.

    Maybe you can use

    $(document).animate({scrollTop: 0}, 0);
    $('html,body').animate({scrollTop: 0}, 0);

    ReplyDelete
  3. http://www.jqueryjohn.com/2014/02/scroll-to-top-of-the-page-using-jquery.html

    refer this site. it works fine.

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons