Smooth Scrolling to Top and Bottom using JQuery

On 10 Mar, 2012 in Javascript with Comments

We all know about internal linking in html[hash pathing], but there is problem when we click on a link it just jumps upto the target. But by adding little transition effects using jquery, we will get smooth scrolling effect

Smooth Scrolling To Top And Bottom Using JQuery

To scroll from top to bottom and bottom to top, we use “scrollTop” function of jquery. by embedding scrollTop inside “animate” we will get the smooth scrolling effect

Smooth scroll Top to Bottom

$('.toBottom').click(function(){
		$('html,body').animate({scrollTop: $(document).height()}, 600);
		return false;
	});

scrollTop value is maximum height of the document

Smooth scroll Bottom to Top

$('.toTop ').click(function(){
		$("html, body").animate({ scrollTop: 0 }, 600);
		return false;
	});

scrollTop value is ‘0’

Complete Code

Hash linking to bottom

Link: <a href="#toBottom" class="toBottom">Scroll to Bottom &darr;</a>
Target: <a name="toBottom"></a>

Hash linking to Top

Link: <a href="#toTop" class="toTop">Scroll to TOP &uarr;</a>
Target: <a name="toTop"></a>

Total javascript for smooth scolling to top and bottom

<script type="text/javascript">
   $('.toTop ').click(function(){
      $("html, body").animate({ scrollTop: 0 }, 600);
      return false;
   });
   $('.toBottom').click(function(){
      $('html,body').animate({scrollTop: $(document).height()}, 600);
      return false;
   });
</script>

And the job is done..!

Tags: , , , ,