链接锚点跳转的平滑滚动效果探究

LinSan2018年08月04日learning,

主题制作离不开锚点制作,它使得主题各元素之间有了某种联系,如果使用得当,还能提高用户体验。林三最近对于锚点也是了解些许,知道了平滑滚动效果的好处,非常友好。这里特别整理出来,当作笔记,也可以让更多的朋友拿去直接用吧!啥也不说,直接上代码:

JQuery实现简单的平滑过渡效果需增加如下代码到主题文件

  1. <script type="text/JavaScript">
  2. $(document).ready(function() {
  3.     var $root = $('html, body');  //选择器缓存起来。这样每次点击时就不需要再重新查找了
  4.     $('a').click(function() {
  5.         var href = $.attr(this, 'href');
  6.         $root.animate({
  7.             scrollTop: $(href).offset().top
  8.         }, 500, function () {
  9.             window.location.hash = href;
  10.         });
  11.         return false;
  12.     });
  13. });
  14. </script>

如果是加到js里面则不需要外部的</script>标签哟!下面是改进版,好处是点击锚点链接平滑滚动到锚点,并且浏览器URL后缀不带有锚点字样,用户体验的时候会觉得更加自然:

  1. <script type="text/JavaScript">
  2.     $(document).ready(function() {
  3.       $('a[href*=#],area[href*=#]').click(function() {
  4.         if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
  5.           var $target = $(this.hash);
  6.           $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
  7.           if ($target.length) {
  8.             var targetOffset = $target.offset().top;
  9.             $('html,body').animate({
  10.               scrollTop: targetOffset
  11.             },
  12.             1000);
  13.             return false;
  14.           }
  15.         }
  16.     });
  17. });
  18. </script>

这个是通用版本,使用后所有的锚点链接都会有平滑滚动的效果。1000是滚动的速度,单位是毫秒,如果要设置锚点与浏览器顶部的绝对距离,可以在 offset().top; 改成 offset().top -10; 意思是距离顶端10px的相对位置。另外,像林三这样的,有很多不同锚点的主题,就需要限定:

// 在id是main-wrap的元素中查找a或area,并且他们的href包括#
$("#main-wrap").find('a[href*=#],area[href*=#]').click(function()

红色部分是新增的代码,表在这个id内查找到的才有效果,其它位置的锚点并不会有效。

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: