JQuery锚点链接平滑滚动效果

作者: Cpder 分类: 杂七杂八 发布时间: 2014-12-27 15:58
  1. $(function(){     
  2.     $(‘a[href*=#],area[href*=#]’).click(function() {  
  3.         if (location.pathname.replace(/^\//, ”) == this.pathname.replace(/^\//, ”) && location.hostname == this.hostname) {  
  4.             var $target = $(this.hash);  
  5.             $target = $target.length && $target || $(‘[name=’ + this.hash.slice(1) + ‘]’);  
  6.             if ($target.length) {  
  7.                 var targetOffset = $target.offset().top;  
  8.                 $(‘html,body’).animate({  
  9.                     scrollTop: targetOffset  
  10.                 },  
  11.                 1000);  
  12.                 return false;  
  13.             }  
  14.         }  
  15.     });  
  16. })  

这段代码的好处是点击锚点链接平滑滚动到锚点,并且浏览器URL后缀不带有锚点字样,使用的过程中基本不用修改以上代码即可实现。

Leave a Reply

Your email address will not be published. Required fields are marked *

Optimized by WPJAM Basic