앵커가 클릭되었을 때 감지하고 추가 픽셀을 추가하고 URL을 유지하는 방법

Question

고정 위치 헤더가 있기 때문에 앵커 링크를 클릭하면 일부 내용이 헤더에 가려져 있으므로 위치를 수정하여 요청한 콘텐츠가 완전히 보입니다. 나는 현재 다음과 같은 jQuery를 성공적으로이 일을하고있다 :

이 방법의 문제는 URL이 결코 사용자가 페이지를 즐겨 찾기에 추가 할 수 있도록 내가 그들을이 원하는 것 같은 #anchor 부분을 추가로 변경하지 않는다는 것이다 그러나

$(document).ready(function() { 
    $("a[href^='#']").click(function() { 
     var id = $(this).attr("href"); 
     var newPosition = $(id).offset(); 
     if (newPosition != undefined) { 
      window.scrollTo(newPosition.left, newPosition.top - 50); 
     } 
     else { 
      window.scrollTo(0, 0); 
     } 
     return false; 
    }); 
}); 

.

URL이 바뀌는 위치에는이 방법이 있습니까? 나는 URL을 바꿀 수 있다고 생각하지 않기 위해 넓은 브라우저 호환성이 필요하다. 아마도 윈도우 스크롤 이벤트를 모니터링하고 URL 해시가 변경되었는지, 50 픽셀 조정을 수행하는지 확인할 수 있다고 생각했습니다. 그러나 더 좋은 방법이 있습니까?

Answer 1

내 대답은 가능한 무엇이 필요한 스크립트를 실험 해본 결과 페이지가 해시로 열리 며 해시를 클릭 할 때 스크롤 한 후 동일한 해시를 클릭 할 때 작동합니다. 뒤로 버튼을 처리합니다. 이것은 인기있는 브라우저에서 작동하는 것 같습니다. 이벤트 콜백 시도 사용에서는 event.preventDefault()에서

 $(document).ready(function() { 
      var scrollOnReady = false; 
      var lastHash = window.location.hash ? window.location.hash : ""; 
      if (lastHash != "") { 
       scrollOnReady = true; 
       setTimeout(function() { 
        var newPosition = $(lastHash).offset(); 
        if (newPosition != undefined) { 
         if ($(window).scrollTop() == newPosition.top) { 
          window.scrollTo(newPosition.left, newPosition.top - 50); 
         } 
        } 
        else { 
         window.scrollTo(0, 0); 
        } 
       }, 50); 
      } 

      $(window).scroll(function() { 
       if (scrollOnReady) { 
        scrollOnReady = false; 
       } 
       else { 
        if ((window.location.hash ? window.location.hash : "") !== lastHash) { 
         lastHash = window.location.hash ? window.location.hash : ""; 
         setTimeout(function() { 
          $(window).scrollTop($(window).scrollTop() - 50); 
         }, 50); 
        } 
       } 
      }); 

      $("a[href^='#']").click(function() { 
       var hash = $(this).attr("href"); 
       if (hash === lastHash) { 
        lastHash = ""; 
       } 
      }); 
     }); 

Answer 2

이것은 실제로 복잡한 문제입니다. BBQ이라는이 문제를 해결하기 위해 특별히 설계된 훌륭한 플러그인이 있습니다. 한 가지 문제 (아직 깨닫지 못했을 수도있는 문제)는 뒤로 버튼을 사용하는 것입니다. 사용자는 뒤로 단추가 링크를 클릭하기 전에 마지막 위치로 "가져올"것으로 기대합니다. 지원하지 않으면 매우 슬픈 사용자가됩니다. BBQ는 이러한 문제를 해결하고 뒤로 버튼을 올바르게 작동하게합니다.