×

目前正在对网站前端做部分调整,可能会看到页面布局不是很理想,但不影响主题购买下载等功能!

点击锚点链接平滑滚动效果

WordPress日记 2019-03-28 学员笔记 127 次

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

获取a的href的锚点连接target,通过

  1.     targetOffset=$(target).offset().top; 获取该锚点到浏览器顶部的距离,然后给body添加动画
    
  2.     $('html,body').animate({
    
  3.     scrollTop: targetOffset
    
  4.     },
    
  5.     1000);

全部代码:
/*锚点动效*/

  1. $('a[href*=#],area[href*=#]').click(function() {
    
  2. if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    
  3. var $target = $(this.hash);
    
  4. $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
    
  5. if ($target.length) {
    
  6. var targetOffset = $target.offset().top;
    
  7. $('html,body').animate({
    
  8. scrollTop: targetOffset
    
  9. },
    
  10. 1000);
    
  11. return false;
    
  12. }
    
  13. }
    
  14. });
文章标签:
热门文章