jQuery單頁網頁滾動/散列問題

Question

我想創建一個包含所有子頁面的多個（html5）部分的1頁網站。有一個固定的導航。這裏有幾個要求：

• 當點擊導航鏈接（如#home，＃約-ME），我希望它平穩地滾動到部分
• 我想在URL中使用哈希like domain.com/#about-me
• 我希望用戶能夠使用瀏覽器的後退/前進按鈕，並在使用時順利滾動到該部分
• 當URL domain.com/#about -me被直接加載，我希望它能夠平滑地滾動到頂部的＃about-me部分。

我一直想弄明白這幾天。我試圖從零開始，並使用諸如BBQ插件等大量不同的插件。我無法弄清楚。但是我學到了一點，所以我決定從頭開始。我更喜歡自己寫插件，因爲它很輕便。不過，如果使用插件的話，如果自己編寫它太麻煩，我一點問題都沒有。

現在我有這樣的HTML，一個簡單的導航：

<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> 

和部分：

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

現在的jQuery的一部分：

// 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); 
    } 
}) 

馬上我遇到一個問題。哈希值會改變，但它會立即跳轉到該部分，然後一秒鐘後它會執行滾動動畫（從它的上一個起始位置開始）。我可以使用preventDefault（）（這會導致一個完美的平滑動畫），但散列不會改變。很好，它改變散列以便瀏覽器歷史記錄工作，但當歷史按鈕被按下時不會發生滾動。

我該如何從這裏開始考慮最高要求？任何建議和最好的例子？

我聽說BBQ hashchange插件對所有這些工作都很好嗎？我將如何實現這一點？文檔不完全考慮我的要求。

Answer 1

動畫完成後，您可以手動使用set location.hash更改網址。首先，你可以使用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事件來在哈希更改時進行滾動。

請以你的點擊處理程序：

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

window.onhashchange = locationHashChanged; 

見http://jsfiddle.net/adamzr/XDWuS

這種方法比較好，但我用它在的jsfiddle哈希值的方式將不使用導航去的部分之外的工作。如果你在頁面上有其他的哈希值，並且你想要滾動它們，你可以刪除特定的代碼。

而且，它只會在支持onhashchange event.http瀏覽器中工作：//caniuse.com/hashchange