해시 링크 후 스크롤

Question

내 사이트에는 해시 (www.somesite.com/a_page#some_hash)를 사용하여 페이지의 특정 요소로 이동할 때 문제가되는 고정 된 네비게이션 막대가 있습니다. 페이지가 해시 된 요소로 점프하면 고정 된 탐색 막대가 요소의 일부를 덮습니다. 나는 오프셋 요소에 너무 페이지 스크롤을 만들려고 노력하고 있어요 :

function getHash() { 
    var hash = window.location.hash; 
    return hash; 
} 

$(document).ready(function(){ 
    if (getHash()) { 
     $(getHash()).fadeOut(300).fadeIn(300) 
      .fadeOut(300).fadeIn(300) 
      .fadeOut(300).fadeIn(300); 
     scrollTo(0, $(getHash()).offset().top + 200); 
    } 
}) 

을 이제 이것을 scrollTo 부분은 어떤 이유로 발사되지 않습니다. 바로 위에있는 부분 (fadeOut & fadeIn 부분). scrollTo 줄을 사용하면 콘솔에서 scrollTo(0, $(getHash()).offset().top - 200);이 제대로 작동합니다. 링크에 해시가있는 페이지를로드 할 때 왜 스크롤되지 않습니까? 모든 입력이 만족 스럽습니다.

Answer 1

href 값이 해시 태그로 시작하는 링크의 기본 기능을 무시하는 함수는 어떻습니까? 그게 당신이 관심을 가질만한 것입니까?

$(document).ready(function() { 
    $('a[href^="#"]').on('click', function(e) { 
     // prevent the default behavior so your named anchors don't cause 
     // a parent with an overflow to 'slide-under' it's parent. 
     e.preventDefault(); 
     $('html, body').animate({ scrollTop: $($(this).attr('href')).position().top }, 'slow'); 
    }); 
});​ 

Fiddle proof of concept

Answer 2

해시는 엄청난 문제를 일으키는 것 같았다. 특히 현재 페이지를 참조하는 해시 된 링크가 페이지를 다시로드하지 않기 때문에. 결과적으로 새로운 콘텐츠가로드되지 않습니다. 방금 해시를 제거하고 쿼리 매개 변수를 사용하여 해시와 관련된 모든 문제를 단순화하기로 결정했습니다.

내 URL이 지금 같이 있어요 :

www.some_site.com/some_page?element=3434 

그런 다음이 쿼리 요소를 찾아 오프셋으로로 스크롤 :

function getUrlVars() { 
    var vars = {}; 
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { 
     vars[key] = value; 
    }); 
    return vars; 
} 

$(document).ready(function(){ 
    var post_url_param = getUrlVars()["element"]; 
    var hashed_element_id = '#' + post_url_param; 
    if (post_url_param) { 
      $(hashed_post_id).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300); 
      scrollTo(0, $(hashed_post_id).offset().top - 250);   
    } 
})