平滑滚动偏移量不适用于ios safari

ukdjmx9f  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(276)

我正在使用这段代码,在safari和firefox上运行良好,并且在调整浏览器窗口大小和显示移动导航时能够完美地适应。在这两种情况下,所有部分都滚动并与其偏移量对齐(桌面上为140px,移动设备上为60px)。
但在ios safari上,链接不尊重偏移量。。。我在代码上遗漏了什么吗?
谢谢

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var offset = 0;
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if ($(this).data('offset') != undefined) offset = $(this).data('offset');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top - offset
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

html链接都是这样的(移动导航上的data offset=“60”):

<li><a id="link2" href="#page-section-60fd24e9182d15129d52aeec" data-offset="140">Programs</a></li>

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题