Question

我试图让我的页面在点击链接时滚动到锚点，同时考虑根据视口宽度更改的标题大小。这适用于Chrome的桌面版本，但在移动版本中，标题高度不会被考虑在内，页面会滚动到隐藏在标题下的锚点的顶部。

这是我改编自CSS Tricks的代码：

 var headerHeight = document.getElementById('header').clientHeight;

                      // 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 target = $(this.hash);
                            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                            // 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-headerHeight
                              }, 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
                                };
                              });
                            }
                          }
                      });

页面应滚动，其偏移量等于headerHeight变量的高度。如上所述，这适用于桌面版Chrome浏览器，但它在移动版本中没有偏移的情况下滚动。

提前致谢。

编辑2：此实例中的问题来自滚动动画后更改焦点的回调。页面滚动然后跳转到聚焦元素，忽略标题偏移。现在唯一的问题是，如果我删除焦点回调，那么屏幕阅读器等页面将无法访问。

Answer 1

测试你的animate函数，将setTimeout设置为200ms。

你的函数动画在DOM和插件JS（如滑块或其他）完全执行之前执行。

Answer 2

此处的问题是由目标再次聚焦的回调函数引起的。这是一个肮脏的修复，但它似乎增加了一个余量：专注于受影响的区域纠正问题：

#projects:focus {
  margin-top:80px;
}

@media all and (min-width:600px) {
  #projects:focus {
    margin-top:0;
  }
}

JQuery Anchor Link滚动到错误的位置（仅限某些设备）

2 个答案: