Question de JavaScript avec scrollTo() dans Chrome

J'essaie de créer une page web avec une barre de navigation en haut qui couvre le contenu en dessous. Lors du chargement de la page avec une ancre dans l'url le comportement normal est que la page défile l'ancre en haut de la fenêtre. Mais alors que le contenu est caché sous la barre de navigation. J'ai donc essayer de résoudre ce problème avec JavaScript scrollTo(). Ma solution fonctionne très bien avec Firefox et Opera, mais pas dans Chrome. Veuillez essayer l'exemple. Toutes les idées sur la façon de résoudre ce problème dans Chrome? Merci.

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>
google chrome n'est probablement pas vous donner le droit de compenser en haut, en droit, j'entends ce que vous attendez

OriginalL'auteur atarax | 2013-03-28

  1. 20

    Chrome est tellement rapide que votre scrollTo() l'action des feux de avant de google Chrome par défaut faites défiler jusqu'à ancre html événement.

    Lui donner un petit retard en utilisant 

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

    Ou tout simplement d'éviter d'utiliser la réelle de l'id de l'élément comme nom de hachage

    au lieu d'utiliser

    test.htm#6

    utilisation

    test.htm#link_6

    ensuite, vous pouvez obtenir le real id en faisant quelque chose comme

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

    Espère que cela aide.

    J'ai appliqué ta solution n ° 2 et il fonctionne très bien. Merci beaucoup!

    OriginalL'auteur Mark Ni