Chrome中的scrollTo（）存在JavaScript問題

我嘗試使用覆蓋下面內容的頂部的固定導航欄創建網頁。當使用url中的錨點加載頁面時，正常行爲是頁面將錨點滾動到窗口頂部。但那個內容隱藏在導航欄下。所以我嘗試用JavaScript scrollTo（）來解決這個問題。我的解決方案適用於Firefox和Opera，但不適用於Chrome。請試試這個例子。任何想法如何在Chrome中解決這個問題？謝謝。Chrome中的scrollTo（）存在JavaScript問題

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>

來源

2013-03-28 atarax

鉻最有可能不會給你正確的偏移頂部，正確的我的意思是你期待什麼 – Huangism

Chrome是如此之快，你的scrollTo（）動作火災以前 Chrome的默認滾動到HTML錨事件。

通過給它一個微小的延遲

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

或者乾脆避免使用實際元素的id哈希名

，而不是使用

TEST.HTM ＃6

使用

TEST.HTM＃link_6

那麼你可以通過做這樣

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

東西希望它可以幫助真正的ID。

來源

2013-03-29 00:02:30

我應用了你的解決方案＃2，它的效果很好。非常感謝！ – atarax

Chrome中的scrollTo（）存在JavaScript問題

回答

相關問題