Smooth Scrolling with jQuery and internal page links


 / Published in: JavaScript
 

URL: http://www.smashingmagazine.com/2009/02/20/ask-sm-css-smooth-page-scrolling-divs-of-equal-height-dealing-with-ie-6/

From the "Ask Smashing Magazine" article on 2-20-09.

Using jQuery, this allows for a smooth scrolling effect when you have links at the top of a page pointing to internal links within the page. A good example of this would be an F.A.Q. page.

  1. $(function(){
  2.  
  3. $('a[href*=#]').click(function() {
  4.  
  5. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  6. && location.hostname == this.hostname) {
  7.  
  8. var $target = $(this.hash);
  9.  
  10. $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
  11.  
  12. if ($target.length) {
  13.  
  14. var targetOffset = $target.offset().top;
  15.  
  16. $('html,body').animate({scrollTop: targetOffset}, 1000);
  17.  
  18. return false;
  19.  
  20. }
  21.  
  22. }
  23.  
  24. });
  25.  
  26. });

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: vaniinstitute_hyderabad1991 on February 24, 2009

vani institute for gate coaching

You need to login to post a comment.