Chrome에서 scrollTo()와 관련된 자바 스크립트 문제

맨 아래에있는 콘텐츠를 포함하는 고정 탐색 바가있는 웹 페이지를 만들려고합니다. URL에 앵커가있는 페이지를로드 할 때 일반적인 동작은 페이지가 앵커를 윈도우의 맨 위로 스크롤한다는 것입니다. 그러나 그 내용은 네비게이션 바 아래에 숨겨져 있습니다. 그래서 JavaScript scrollTo()로이 문제를 해결하려고합니다. 내 솔루션은 파이어 폭스와 오페라에서는 잘 작동하지만 Chrome에서는 제대로 작동하지 않습니다. 예제를 시도하십시오. Chrome에서이 문제를 해결하는 방법에 대한 아이디어가 있으십니까? 고맙습니다.Chrome에서 scrollTo()와 관련된 자바 스크립트 문제

로 HTML :

<!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

크롬이 당신의 scrollTo() 액션 화재가 크롬의 기본 스크롤 전에 앵커 이벤트를 HTML로 너무 빠릅니다.

는 사용하여 그것을 작은 지연을 부여

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

또는 단순히 해시 이름으로 실제 요소 ID를 사용

대신

로 HTML을 사용하지 마십시오 # 6

사용

를 Test.htm 번호 link_6

다음 희망은 도움이

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

같은 것을 수행하여 실제 ID를 얻을 수 있습니다.

출처

2013-03-29 00:02:30

해결책 # 2을 적용했는데 효과가 좋습니다. 고마워요! – atarax

Chrome에서 scrollTo()와 관련된 자바 스크립트 문제

답변

관련 문제