링크를 클릭하면 Html 페이지가 점프합니다.

Question

img에서 클릭 이벤트를 트리거 할 때 브라우저가 점프를 멈추지 않으므로 프론트 엔드를 작성하고 조금 당황 스럽습니다.

나는 event.preventDefault() 또는 false를 반환 할 것이라고 생각했지만 분명히 뭔가를 놓치고 있으며 다음에 시도 할 내용을 완전히 잃어 버렸습니다! 여기

코드

$("#imgViewer-thumbs").find("img").click(function (event) { 
     event.preventDefault(); 
     var $imgViewPane = $("#imgViewPane"), 
       $selectedImage = $imgViewPane.find(".selected-image"), 
       $clickedImage = $(this), 
       $clickedImageIndex = $clickedImage.prevAll().length + 1, 
       $maxIndex = $clickedImageIndex + $clickedImage.nextAll().length, 
       $targetImage = $imgViewPane.find(":nth-child(" + $clickedImageIndex + ")"); 

     if (!$targetImage.hasClass("selected-image")) { 
      $selectedImage.fadeOut(100, function() { 
       $targetImage.addClass("selected-image"); 
       $selectedImage.removeClass("selected-image"); 
       $targetImage.fadeIn(100); 
      }); 
     } 
     console.log('Returning false'); 
     return false; 
    } 
    ); 

편집입니다 : 앵커 태그를 클릭와 설정 저도 같은 문제가 있었다 http://jsfiddle.net/tEXaa/

Answer 1

문제 같은 것을 사용

는 "#imgViewPane" doen't가 높이를 유지하는 이미지 컨테이너입니다. 그러면 이전 이미지가 희미 해져 "#imgViewPane"의 높이가 손실되고 결과적으로 페이지의 스크롤 위치가 사라집니다.

나는 당신의 바이올린 업데이트 : http://jsfiddle.net/tEXaa/1/

Answer 2

여기 jsfiddle의 이미지 뷰어하지만,하고 문제는 jQuery 코드로 아니었다 그러나 부정적인 마진이 있습니다. 대신이

<div width="600px"> 
    <div id="top-left" style="height:200px;"> some content </div> 
    <div id="top-right" style="margin-top:-200px;> content"</div> 
</div> 

사용

<div width="600px"> 
    <div id="top-left" style="float:left;"> some content </div> 
    <div id="top-right" style="float:right;> content"</div> 
</div>