Geek Answers Handbook

JavaScript issue with scrollTo () in Chrome

I am trying to create a webpage with a fixed navigation bar at the top that covers the content at the bottom. When loading a page with a binding in the URL, the normal behavior is that the page scrolls the anchor at the top of the window. But then this content is hidden under the navigation bar. So I am trying to solve this problem with JavaScript scrollTo (). My solution works fine with Firefox and Opera, but not in Chrome. Try an example. Any ideas on fixing this issue in Chrome? Thanks.

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
source share
1 answer

Chrome runs so fast that your scrollTo () action fires before . Chrome by default scrolls to the html anchor event.

Give it a little delay using

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

Or just don't use the id of the actual item as the hash name

instead

test.htm # 6

using

test.htm # link_6

then you can get the real id by doing something like

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

Hope this helps.

+14
source

More articles:


All Articles