jQuery 한 페이지 웹 사이트 스크롤/해시 문제

Question

모든 하위 페이지가 포함 된 여러 (html5) 섹션이있는 1 페이지 웹 사이트를 만들고 싶습니다. 고정 탐색이 있습니다.

탐색 링크를 클릭 할

• (. 예를 들어 #home에 대한-나 #) 나는 그것이 원활
• 내가 URL의 해시를 사용하고자하는 섹션으로 스크롤하려면 : 다음 요구 사항의 커플 like domain.com/#about-me
• 사용자가 브라우저에서 뒤로/앞으로 버튼을 사용할 수있게하고 사용하면 해당 섹션으로 부드럽게 스크롤합니다.
• URL domain.com/#about -me이 바로로드됩니다. 정상적으로 # about-me 섹션으로 부드럽게 스크롤하고 싶습니다.

나는 이것을 수일 동안 파악하려고 노력해 왔습니다. 나는 BBQ 플러그인과 같은 다른 플러그 인과 처음부터 이것을 시도했다. 나는 그것을 이해할 수 없었다. 그러나 나는 조금 배웠다. 그래서 나는 다시 처음부터 다시 시작하기로 결정했다. 가볍기 때문에 플러그인없이 직접 작성하는 것을 선호합니다. 그러나 플러그인을 사용하는 데는 아무런 문제가 없습니다. 플러그인을 직접 작성하는 것은 번거롭기 만합니다.

<nav> 
    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#about-me">About me</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</nav> 

및 섹션 : JQuery와 부분에 대한 지금

<div id="content-wrapper"> 
    <section id="home"> 
     <div>content...</div> 
    </section> 
    <section id="about-me"> 
     <div>content...</div> 
    </section> 
    etc... 
</div> 

:

// Function to check if section exists 
function isSection(section){ 
    if($('section'+section).length > 0){ 
     return true; 
    } 
    else{ 
     return false; 
    } 
} 

// Scroll function 
function scrollToSection(section){ 
    var offset = $(section).offset().top; 
    $('html, body').stop().animate({ 
     scrollTop: offset 
    }, 600); 
} 

// The Click() function 
$('nav ul a').click(function(){ 
    var section = $(this).attr('href'); 
    if(isSection(section)){ 
     scrollToSection(section); 
    } 
}) 

지금 당장 내가 건너

는 지금은, 간단한 탐색이 HTML을 문제. 해시는 변경되지만 순간적으로 섹션으로 이동하고 분할 된 초 후에 어쨌든 (이전 시작 위치에서) 스크롤하는 애니메이션을 수행합니다. preventDefault()를 사용하면 완벽하게 부드러운 애니메이션을 만들 수 있지만 해시는 변경되지 않습니다. 해시를 변경하여 브라우저 기록이 작동하도록하는 것이 좋지만 기록 버튼을 누르면 스크롤이 발생하지 않습니다.

여기에서 가장 중요한 요구 사항을 염두에두고 어떻게해야합니까? 모든 권장 사항 및 예제가 바람직합니까?

나는이 모든 것에 대해 BBQ hashchange 플러그인이 잘 작동한다고 들었다. 어떻게 구현할 수 있습니까? 이 문서는 제 요구 사항을 충분히 고려하지 않았습니다.

Answer 1

애니메이션이 완료되면 set location.hash를 수동으로 사용하여 URL을 변경할 수 있습니다. 먼저 preventDefault를 사용하여 애니메이션을 활성화합니다. 그것이 당신이 가고 싶었던 곳으로 스크롤 한 후에 당신은 위치를 사용할 수 있습니다.

// Scroll function 
function scrollToSection(section){ 
    var offset = $(section).offset().top; 
    $('html, body').stop().animate({ 
     scrollTop: offset 
    }, 600, function(){ 
     window.location.hash = section; 
    }); 
} 

// The Click() function 
$('nav ul a').click(function(event){ 
    event.preventDefault(); 
    var section = $(this).attr('href'); 
    if(isSection(section)){ 
     scrollToSection(section); 
    } 
    return false; 
})​ 

는 또 다른 방법은 그들이 평소의 방법대로 링크가 해시를 변경할 수 있도록하는 것입니다 http://jsfiddle.net/adamzr/p5L57/

를 참조하십시오. 그러나 해시가 변경 될 때 onhashchange 이벤트를 사용하여 스크롤을 수행 할 수 있습니다.http://jsfiddle.net/adamzr/XDWuS

이 방법은 더 나은를 참조

function locationHashChanged(event) { 
    event.preventDefault(); 
    var section = location.hash; 
    if(isSection(section)){ 
     scrollToSection(section); 
    } 
} 

window.onhashchange = locationHashChanged; 

,하지만 난 jsfiddle 해시에서 그것을 사용하는 방법은 섹션으로 이동합니다 탐색을 사용하여 외부에서 작동하지 않습니다

는 귀하의 클릭 핸들러를 교체 . 페이지에 다른 해시가 있고 해당 스크롤을 사용하여 작업하려는 경우 섹션 관련 코드 만 제거하면됩니다.

또한, 만 onhashchange의 event.http를 지원하는 브라우저에서 작동합니다 :