jQuery单页网站滚动/哈希问题

Question

我想创建一个 1 页网站，其中包含多个 (html5) 部分，其中包含所有子页面。有固定导航。以下是一些要求:

• 当点击导航链接(例如#home、#about-me)时，我希望它能够平滑滚动到该部分
• 我想在 URL 中使用哈希，例如 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 更改 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 事件在哈希更改时进行滚动。

将您的点击处理程序替换为:

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

window.onhashchange = locationHashChanged;

参见http://jsfiddle.net/adamzr/XDWuS

这种方法更好，但是我在 jsfiddle 哈希中使用它的方式除了使用导航转到各个部分之外将不起作用。如果页面上有其他哈希值并且您希望滚动也适用于它们，您只需删除部分特定代码即可。

此外，它仅适用于支持 onhashchange 事件的浏览器。http://caniuse.com/hashchange