jQuery-bbq가 포함 된 jQuery 해시 기반 탐색은 페이지가 점프 이동합니다.

Question

www.hypacketepress.com에서 #hash 앵커 태그 기반 탐색을 사용하는 jQuery 및 jquery-bbq 플러그인을 사용하는 사이트가 있습니다. 그것은 실제로, 페이지가 실제 <a name...> 태그로가는 것처럼 헤더 아래로 뛰어 오르는 경우를 제외하고는 훌륭하게 작동합니다. 그러나 그러한 태그는 없습니다. 나는 홈페이지를 방문하는 경우 OS X에 크롬으로 예를 들어

:

http://www.tinytoepress.com/#store

:

http://www.tinytoepress.com/

다음 왼쪽 상단에있는 "저장"링크를 클릭, 나는로 이동

그러나 헤더 아래로 스크롤되었으므로 바람직하지 않습니다. 나는 정상에 바로 머물고 싶다.

위로 스크롤하고 "정보"를 클릭하면 정보 페이지로 이동하지만 헤더를지나 아래로 스크롤됩니다. 그러나 이제 맨 위로 스크롤하여 "Store"를 다시 클릭하면 원하는대로 스크롤하지 않고 Store로 이동합니다.

나는 nav 클릭에서 설정 한 div의 가시성을 제어하는 ​​간단한 .show() 및 .hide() 방법을 사용하고 있습니다.

페이지에서 튀어 나오지 않도록하는 방법에 대한 아이디어가 있으십니까?

Answer 1

해시 주소가 변경 될 때의 기본 브라우저 동작은 해시시. 예 : http://example.com/some-page#store은 store (<div id="store">...</div>)의 요소를 페이지에서 검색합니다. 이것이 발견되면 페이지가 그곳으로 점프합니다.

id 속성을 설정하는 대신 사용자 정의 data-attr 속성을 설정하는 것이 좋습니다. 나는 그것을 할 수있다 생각

$("a").on("click", function() { 

    // get the clicked link 
    var $clickedLink = $(this); 

    // get the url 
    var url = $clickedLink.attr("href"); 

    // we search the hashes 
    if (url[0] !== "#") { return; } 

    // change the location using js 
    location.hash= url; 

    // hide all pages 
    $("[data-page]").hide(); 

    // show the current page 
    $("[data-page='" + url.substring(1) + "']").show(); 

    // prevent the default browser behaviour (jumping) 
    return false; 
}); 

JSFIDDLE

Answer 2

죄송합니다. Google Chrome 31.0.1650.63에서 OS X 10.9를 실행하면서 문제를 재현 할 수 없습니다. 이상한 점프에 대한 가능한 설명 : 때로는 콘텐츠 길이를 변경하는 것은 새로운 콘텐츠를로드하고 삽입 할 때 역할을합니다 ...

Answer 3

를 : 코드는 다음과 같이 표시됩니다

$("[data-page='" + location.hash.substring(1) + "']").show() 

:

<div id="store">...</div>는 <div data-page="store">...</div> 될 것이며, jQuery를 측면에서 당신과 함께 $(location.hash).show()을 대체합니다 이 코드가 탐색을 클릭 할 때마다 iframe을 추가하고 제거하는 방법과 관련이 있습니다. iframe이 페이지를 완전히로드 할 수 있도록 허용한다면 점프가 발생하지 않습니다. 크롬 도구에서 iframe을 삭제하면 점프가 모두 중단됩니다. 여기서 틀릴 수도 있지만 네비게이션을 클릭 할 때 페이지 콘텐츠를 보이고 숨기 만하면 iframe을 Jquery 개체에 저장 한 다음 다시 같은 div 컨테이너에 넣을 필요가 없습니다. iframe이 Iframe 내부의 모든 호출을 되돌려 놓으면 js 리소스가 다시 발생합니다. 이 호출은 사용자가 다른 nav 요소를 클릭 할 때 중단됩니다. 크롬 도구의 네트워크 탭을 살펴보면 모든 탐색을 클릭 한 후 자원 검색이 취소되고 다른 항목이 상태 열에 206 부분 콘텐츠로 표시됩니다. 내 제안은 Iframe을 한 ​​번로드 한 다음 필요할 때 콘텐츠를 숨기는 것입니다.이것이 도움이 되었기를 바랍니다.

b = $("#movieCtn").html(), console.log("html: ", b), $("#movieCtn").html(""), console.log(b,$("#movieCtn").html()), $("#movieCtn").html(b))