2013-01-08 7 views
3

페이지에 탭이있는 콘텐츠가 있습니다. URL에 해시 세그먼트가있어 올바른 탭 콘텐츠로 이동합니다. 특이한 것은 없습니다. 그러나 탭이 페이지 아래쪽에 있기 때문에 누군가가 URL에서 해시 타겟을 방문하면 페이지 아래로 탭 비트로 떨어지게되어 상단 탐색 모음과 탐색 경로가 잘립니다.window.scrollTo()가 페이지로드에서 작동하지 않는 이유는 무엇입니까?

나는 그런 일이 일어나길 원하지 않습니다. 혼란스러워.

나는 그것을 바로 잡기 위해 간단한 것이라고 생각 : 뭔가처럼 : 작동하지 않습니다

$(function(){ 
window.scrollTo(0,0) 
}); 

. 해시 앵커에서 여전히 떨어졌습니다.

window.load()에서 호출 해 보았습니다. 나는 스크립트를 < 머리글에서>를 이동하기 전에 시도했습니다. window.scrollTo 및 window.scroll 시도했습니다. 아무것도 작동하지 않습니다. 전혀 스크롤하지 않는 것보다 더 나쁜 인 ...

$(function(){ 
    setTimeout(function(){ 
     window.scrollTo(0,0) 
    },2000); 
}); 

: 나는 실제로 페이지의 상단까지 날 다시 이동 얻을 수 있었던 유일한 스크립트는 이것이다.

왜 다른 기능이 작동하지 않습니까? 내가 잘못된 일을하고 있습니까, 아니면 사용자가 페이지 상단으로 돌아 오지 못하게 할 수 있습니까?

===================== 편집 :

예는 (당신이 좀 더 LOREM의 파라와 패드 그것을 할 수 있습니다). 새로운 HTML 파일로 저장 한 다음 #의 hash1의 URL로 이동합니다

<!doctype html> 
<html lang="en"> 

<head> 
<meta http-equiv="Content-type" content="text/html;charset=utf-8" /> 
<title>Load</title> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
<script type="text/javascript"> 
/* 


// doesn't work 
$(function(){ 
    window.scrollTo(0,0); 
}); 


// doesn't work 
$(window).on('load', function(){ 
    window.scrollTo(0,0); 
}); 


// doesn't work 
window.scrollTo(0,0); 


// works, but horrible UX. 
$(function(){ 
    setTimeout(function(){ 
     window.scrollTo(0,0) 
    },2000); 
}); 



*/ 
</script> 

</head> 

<body> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    <p><a name="hash1"></a>Hash 1</p> 


<script type="text/javascript"> 
    // doesn't work 
    // window.scrollTo(0,0); 
</script> 

</body> 

</html> 
+0

실례를 보여줄 수 있습니까? –

+0

해결 방법으로 문제를 해결하는 것보다는 문제를 모두 예방하는 것이 더 좋지 않습니까? 예 : 해당 탭에서 페이지 상단의 해시를 사용하여? – simon

+0

나는 조금 혼란 스럽다. 샘플 바이올린을 보여줄 수 있습니까? – nairvijays

답변

2

브라우저가 certains 조건에 스크롤 (해시 태그, F5를하고 요소를 집중 또는 scrollIntoView를 호출 할 때 이전 스크롤 상태를 복원). 스크롤 이벤트는이 모든 경우에 해고되지 않습니다.

불행히도, 나는 이것을 피할 수있는 확실한 방법을 찾지 못했습니다.

먼저, 창에서 스크롤 이벤트를 모니터링하고 이벤트를 취소 할 수 있는지 확인하십시오.

작동하지 않는 경우 앵커를 위로 이동하거나 제거하기 만하면됩니다.

0

-> 귀하의 jquery 함수는 아마 호출되지 않습니다 onLoad 간단한 코드 예제를 게시 할 수 있습니다 ->이 함수는 jquery 대신 javascript를 사용하여 html 파일의 지정된 위치로 스크롤합니다.

<html> 
<head> 
    <script> 
    function windowscroll(yscroll,scrollspeed){ 
    //alert('hi'); 
    window.scrollBy(0,-9000);//initial scroll to the top of the page 
    for (var iscroll=0;iscroll<yscroll;iscroll++){ 
    setTimeout('window.scrollBy(0,' + iscroll + ')',scrollspeed*iscroll); 
    } 
    } 
    </script> 
    </head> 
    <body onLoad="windowscroll(0,0)"> 
    <div> 
    Click here</div> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/>asdasd asdasf sdfgsdf<br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/>zxd<br/><br/><br/><br/><br/> 

zxc dsf sdf asdf 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/> 
<br/>dasfsdf<br/><br/> 
</body> 
</html> 
관련 문제