jquery 브라우저가 클릭 할 때 맨 위로 스크롤되는 것을 방지합니다.

Question

다음과 같은 축소판 이미지 뷰어 스크립트가 있습니다. 각각의 축소판 이미지와 큰 부모 이미지를 엄지 손가락과 큰 것으로 각각 명명했습니다. 스크립트는 파일 경로를 변경하여 클릭 한 모든 축소판 이미지로 큰 이미지를 대체합니다.

<script> 
$('.thumbs').delegate('img','click', function(){ 
    $('.large').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('.large').hide().fadeIn(500); 
}); 
</script> 

썸네일을 클릭 할 때마다 페이지가 위로 스크롤됩니다. 나는 이것을 막으려 고 노력했다.

return false; 

그러나 큰 이미지는 업데이트되지 않는다. 페이지가 상단으로 스크롤되는 것을 방지 할 수있는 또 다른 방법이 있습니까?

도움 주셔서 감사합니다.

Answer 1

이 페이지는 페이지의 상단으로 스크롤하지 않습니다, 그것은 큰 이미지의 상단으로 이동 출처.

효과를 사용 중지하거나 숨기고 페이드 인 효과를 시도하고 문제가 지속되는지 확인할 수 있습니다.

문제가 지속되면 문제가 해결되었다는 다음 코드를 추가하기 만하면됩니다.

<script> 
$('.thumbs').delegate('img','click', function(){ 
    var y = window.pageYOffset; 
    $('.large').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('.large').hide().fadeIn(500); 
    window.scrollTo(0, y) 
}); 
</script> 

죄송합니다. 나는 구글 번역을 사용하고있다.

Answer 2

반품 사실을 정확히 기재 했습니까? 당신이 마지막에 그것을했다면, 그것은 효과가 있었을 것입니다. 이처럼 :

<script> 
$('.thumbs').delegate('img','click', function(){ 
    $('.large').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('.large').hide().fadeIn(500); 
    return false; 
}); 
</script> 

또한 e.preventDefault()를 사용하여 기본 연결 동작을 중지하려면

<script> 
    $('.thumbs').delegate('img','click', function(e){ 
     $('.large').attr('src',$(this).attr('src').replace('thumb','large')); 
     $('.large').hide().fadeIn(500); 
     e.preventDefault(); 
     return false; 
    }); 
</script> 

Answer 3

나는 IE9에서 그 일을하지 않는 것. 기본 동작을 방지하십시오 : 당신이 사라져 잠시, 큰 이미지 SRC를 교체 할 때 때문에이 문제가 발생

<script> 
$('.thumbs').delegate('img','click', function(event){ 
    $('.large').attr('src',$(this).attr('src').replace('thumb','large')); 
    $('.large').hide().fadeIn(500); 
    event.preventDefault(); 
}); 
</script> 

Answer 4

페이지의 작은 없어, 스크롤은 더 그렇게까지 갈 필요가있다. 확대/축소 페이지를 시도하면 그다음 (Ctrl + 마우스 스크롤 업) 발생하지 않습니다.

그냥 변경되지 않습니다 수정 크기 DIV 당신에게 큰 이미지를 넣어 : 이미지를 변경하기 때문에

가

<div style="height: 490px; width: 490px;float: left;"> 
    <img style="display: block;" class="large" src="images/06_large.png"> 
</div>