Other/其他

前端锚点链接平滑滚动效果

阿里云

我们在开发 WordPress 主题的时候,很多时候前端会用到锚点链接,默认的点击效果是直接跳到指定的位置,效果比较生硬,如果能加些平滑滚动的效果肯定会更舒服点。获取 a 的 href 的锚点连接 target,通过:

  1.         targetOffset=$(target).offset().top; 获取该锚点到浏览器顶部的距离,然后给body添加动画
  2.  
  3.         $('html,body').animate({
  4.  
  5.         scrollTop: targetOffset
  6.  
  7.         },
  8.  
  9.         1000);
也想出现在这里?联系我们
创客主机

全部代码:

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

前端锚点链接平滑滚动效果

已有 511 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!