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

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

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

  1. // Select all links with hashes
  2. $('a[href*="#"]')
  3. // Remove links that don't actually link to anything
  4. .not('[href="#"]')
  5. .not('[href="#0"]')
  6. .click(function(event) {
  7. // On-page links
  8. if (
  9. location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
  10. &&
  11. location.hostname == this.hostname
  12. ) {
  13. // Figure out element to scroll to
  14. var offset = 0;
  15. var target = $(this.hash);
  16. target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  17. if ($(this).data('offset') != undefined) offset = $(this).data('offset');
  18. // Does a scroll target exist?
  19. if (target.length) {
  20. // Only prevent default if animation is actually gonna happen
  21. event.preventDefault();
  22. $('html, body').animate({
  23. scrollTop: target.offset().top - offset
  24. }, 1000, function() {
  25. // Callback after animation
  26. // Must change focus!
  27. var $target = $(target);
  28. $target.focus();
  29. if ($target.is(":focus")) { // Checking if the target was focused
  30. return false;
  31. } else {
  32. $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
  33. $target.focus(); // Set focus again
  34. };
  35. });
  36. }
  37. }
  38. });

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

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

暂无答案!

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

相关问题