Chrome中的scrollTo()存在JavaScript问题

2019-10-06 22:38:28 阅读：256 来源： 互联网

标签：javascript google-chrome scrollto

我尝试创建一个网页,顶部有一个固定的导航栏,覆盖下面的内容.当在网址中加载带锚点的页面时,正常的行为是页面将锚点滚动到窗口的顶部.但是那个内容隐藏在导航栏下面.所以我尝试使用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' onl oad='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非常快,以至于您的scrollTo()操作会在Chrome默认滚动到html锚点事件之前触发.

使用它给它一点延迟

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

或者简单地避免使用实际的元素id作为哈希名称

而不是使用

test.htm#6

采用

test.htm#link_6

那么你可以通过做类似的事情获得真实的身份

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

希望能帮助到你.

标签：javascript,google-chrome,scrollto
来源： https://codeday.me/bug/20191006/1862842.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Chrome中的scrollTo()存在JavaScript问题