a标签锚点滑动特效

佚名 7年前 (2019-04-25) 随笔 1642人围观抢沙发百度已收录

一、创建锚点

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<div class="header" id="top">//终点标签，添加一个id

<a href="#top" class="fixed_top_a">^</a>//a标签href添加#id

锚点跳转很生硬，很不友好，找了两种平滑的跳转方法

二、平滑跳转

$('a[href*=#],area[href*=#]').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({
          scrollTop: targetOffset
        },
          1000);
        return false;
      }
    }
  });

  https://blog.csdn.net/u012011360/article/details/78972858//原文链接

$(".fixed_btn").click(function () {

    $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);

    return false;

});

https://blog.csdn.net/never_tears/article/details/53377123//原文链接