Chrome 中 scrollTo() 的 JavaScript 问题答案

【问题标题】：JavaScript issue with scrollTo() in ChromeChrome 中 scrollTo() 的 JavaScript 问题
【发布时间】：2013-03-19 11:10:10
【问题描述】：

我尝试创建一个顶部带有固定导航栏的网页，该导航栏覆盖下面的内容。在 url 中加载带有锚点的页面时，正常行为是页面将锚点滚动到窗口顶部。但随后该内容隐藏在导航栏下。所以我尝试用 JavaScript scrollTo() 来解决这个问题。我的解决方案适用于 Firefox 和 Opera，但不适用于 Chrome。请尝试示例。任何想法如何在 Chrome 中解决此问题？谢谢。

test.htm:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <meta charset='UTF-8'>
    <style type='text/css'>
      #navi { position:fixed; left:0; top:0; width:100%; height:100px; background-color:yellow; }
      #spacer { background-color:cyan; height:100px; }
      #spacer2 { height:1000px; }
      .style1 { background-color:green; height:200px; }
    </style>
    <script type='text/javascript'>
      /* <![CDATA[ */
      function scrollAnchor() {  // doesn't work in Chrome
        var y = document.getElementById(window.location.hash.substr(1)).offsetTop - 110;
        window.scrollTo(0, y);
        //alert(y);
      }
      /* ]]> */
    </script>
  </head>
  <body id='top' onload='scrollAnchor();'>
    <div id='navi'>
      <a href='./test2.htm'>Menu</a>
    </div>
    <div id='main'>
      <div id='spacer'></div>
      <h3 id='1'>Heading 1</h3><p class='style1'></p>
      <h3 id='2'>Heading 2</h3><p class='style1'></p>
      <h3 id='3'>Heading 3</h3><p class='style1'></p>
      <h3 id='4'>Heading 4</h3><p class='style1'></p>
      <h3 id='5'>Heading 5</h3><p class='style1'></p>
      <h3 id='6'>Heading 6</h3><p class='style1'></p>
      <div id='spacer2'></div>
    </div>
  </body>
</html>

test2.htm:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <meta charset='UTF-8'>
  </head>
  <body>
    <a href='test.htm#1'>Heading 1</a>
    <a href='test.htm#2'>Heading 2</a>
    <a href='test.htm#3'>Heading 3</a>
    <a href='test.htm#4'>Heading 4</a>
    <a href='test.htm#5'>Heading 5</a>
    <a href='test.htm#6'>Heading 6</a>
  </body>
</html>

【问题讨论】：

chrome 很可能没有给你正确的偏移顶部，我的意思是你所期望的

标签： javascript google-chrome scrollto

【解决方案1】：

Chrome 的速度如此之快，以至于您的 scrollTo() 操作会在 Chrome 的默认滚动到 html 锚点事件之前触发。

使用

给它一点延迟

setTimeout(function() {window.scrollTo(0, y);},1)

或者干脆避免使用 实际元素 id 作为哈希名称

而不是使用

test.htm#6

使用

test.htm#link_6

然后您可以通过执行类似的操作来获取真实 ID

window.location.hash.split('_')[1]

希望对你有帮助。

【讨论】：

我想补充一点，如果它不起作用，请增加间隔。设置 10 毫秒对我有用。
我们也可以使用history.scrollRestoration = 'manual'，这样可以解决问题。

【解决方案2】：

我建议避免使用 JavaScript，而是创建一个专用的锚元素，然后将其在标题上方偏移至少您的标题高度。

这在https://stackoverflow.com/a/13184714/5951116中已经有很好的描述。

您的代码将如下所示：

<div id='navi'>
  <a href='./test2.htm'>Menu</a>
</div>
<div id='main'>
  <div id='spacer'></div>
  <div class='article-wrapper'>
    <a class='anchor' id='1'></a>
    <h3>Heading 1</h3><p class='style1'></p>
  </div>
  <div class='article-wrapper'>
    <a class='anchor' id='2'></a>
    <h3>Heading 2</h3><p class='style1'></p>
  </div>
  ...
</div>

#navi {
  height: 50px;
}

#main a.anchor {
    display: block;
    position: relative;
    top: -50px;
    visibility: hidden;
}

或者使用 CSS 变量来消除尽可能多的紧密耦合：

:root {
  --header-height: 50px;
}

#navi {
  height: var(--header-height);
}

#main a.anchor {
    display: block;
    position: relative;
    top: -var(--header-height);
    visibility: hidden;
}

【讨论】：