내 jquery 코드를 실행할 때 브라우저를 고정하는 방법

Question

내 프로젝트 웹 페이지 중 하나가 너무 긴 경우. 그래서 나는 말한다 버튼에 jQuery 코드의 작은 조각을 추가하기로 결정 : 사용자가 웹 페이지가 완전히 표시됩니다이 버튼을 누르면

<a class="button" align="center" href="#"><div id="clickMe">Show me!.</div> 

.

<script> 
$(document).ready(function(){ 
    $("#clickMe").click(function(){ 
     $("img").fadeIn(1000); 
     $("#picFrame").slideToggle(); 
    }); 
}); 

나는 사용자가 컨텐츠가 표시됩니다 더보기 버튼을 누르면이 코드

<div id="picFrame"> 
Bla bla goes here 
</div> 

를 사용하여 페이지의 표시 부분을 숨기고 있어요 다음은 jQuery 코드입니다.

하지만 문제는이 콘텐츠가 페이지 하단에 표시된다는 것입니다. 사용자가이 버튼을 클릭하면 브라우저가 자동으로 헤더까지 스크롤합니다. 사용자는 내용을보기 위해 아래로 스크롤해야합니다. 나는 이것을 피하고 싶다.

사용자가 제출 한 후에는 브라우저가 이전 위치와 동일한 위치에서 수정해야합니다. jQuery가 실행되어야하며 내용이 표시되어야합니다. 어떤 아이디어? 페이지 상단에 전송 href='#'을 가지고 있기 때문에

Answer 1

jQuery JSFiddle

이 있습니다.

당신도, href=''은 그래서 아무데도 가지 않는다 수행하거나 jQuery를이있을 수 있습니다 :

$(document).ready(function(){ 
    $("#clickMe").click(function(e){ 
     $("img").fadeIn(1000); 
     $("#picFrame").slideToggle(); 
     e.preventDefault(); 
    }); 
}); 

e.preventDefault(); 페이지의 상단에 점프에서 중지됩니다. 클릭 기능에도 e을 포함해야합니다.

Answer 2

다른 사람이 제안한대로 빈 href 속성을 사용하지 마십시오. 문서의 유효성이 손상 될 수 있습니다. RFC 2396에서 URI 일반 구문 구역 :

4.2. 동일한 문서 참조

URI가없는 URI 참조는 현재 문서 에 대한 참조입니다. 즉, 문서 내의 비어있는 URI 참조는 해당 문서의 시작에 대한 참조로 해석되며 이며 조각 식별자 만 포함하는 참조는 해당 문서의 식별 된 부분에 대한 참조 입니다. [...]

같이 대신 JS를 확장

이

$(document).ready(function(){ 
    $("#clickMe").click(function(evt){ //Add event object to the callback function 
     evt.stopPropagation(); //Prevents event propagation/bubbling 
     evt.preventDefault(); //Prevents browser's default behaviour when clicking 
     $("img").fadeIn(1000); 
     $("#picFrame").slideToggle(); 
     return false; 
    }); 
});