12

下部のコンテンツをカバーする固定ナビゲーション バーが上部にある Web ページを作成しようとしています。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>
4

2 に答える 2

35

Chrome は非常に高速であるため、 Chrome のデフォルトの HTML アンカー イベントへのスクロールの前にscrollTo() アクションが起動します。

を使用して小さな遅延を与えます

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

または、実際の要素 IDをハッシュ名として使用しないようにします。

使用する代わりに

test.htm#6

使用する

test.htm#link_6

次に、次のようなことを行うことで実際のIDを取得できます

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

それが役に立てば幸い。

于 2013-03-29T00:02:30.490 に答える