Chrome中的scrollTo（）引发JavaScript问题 [英] JavaScript issue with scrollTo() in Chrome
问题描述
我尝试创建一个网页，顶部有一个固定的导航栏，覆盖下面的内容。当使用url中的锚点加载页面时，正常行为是页面将锚点滚动到窗口顶部。但那个内容隐藏在导航栏下。所以我尝试用JavaScript scrollTo（）来解决这个问题。我的解决方案适用于Firefox和Opera，但不适用于Chrome。请试试这个例子。任何想法如何在Chrome中解决这个问题？
test.htm：
<！DOCTYPE HTML>
< html>
< head>
< title>测试< /标题>
< meta charset ='UTF-8'>
< style type ='text / css'>
#navi {position：fixed;左：0;顶部：0;宽度：100％;高度：100像素;背景颜色：黄色; }
#spacer {background-color：cyan;高度：100像素; }
＃spacer2 {height：1000px; }
.style1 {background-color：green;高度：200像素; }
< / style>
< script type ='text / javascript'>
/ *<！[CDATA [* /
function scrollAnchor（）{//不适用于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'>菜单< / a>
< / div>
< div id ='main'>
< div id ='spacer'>< / div>
< h3 id ='1'> Heading 1< / h3>< p class ='style1'>< / p>
< h3 id ='2'> Heading 2< / p3>< 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>测试< /标题>
< meta charset ='UTF-8'>
< / head>
< body>
< a href ='test.htm＃1'>标题1< / a>
< a href ='test.htm＃2'>标题2< / a>
< a href ='test.htm＃3'>标题3< / a>
< a href ='test.htm＃4'>标题4< / a>
< a href ='test.htm＃5'>标题5< / a>
< a href ='test.htm＃6'>标题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]
希望它有帮助。
I try to create a web page with a fixed navigation bar at the top that covers the content underneath. When loading the page with an anchor in the url the normal behaviour is that the page scrolls the anchor to the top of the window. But then that content is hidden under the navigation bar. So I try to solve this problem with JavaScript scrollTo(). My solution works fine with Firefox and Opera but not in Chrome. Please try the example. Any ideas how to fix this issue in Chrome? Thank you.
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>
Chrome is so fast that your scrollTo() action fires before Chrome's default scroll to html anchor event.
Give it a tiny delay by using
setTimeout(function() {window.scrollTo(0, y);},1)
Or simply avoid using the actual element id as hash name
instead of using
test.htm#6
use
test.htm#link_6
then you can get the real id by doing something like
window.location.hash.split('_')[1]
Hope it helps.
这篇关于Chrome中的scrollTo（）引发JavaScript问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
