j查询单页滚动网站 - 动画深度链接

Question

我正在开发一个单页滚动网站（带有粘性标题），并希望添加动画深度链接。

您可以在此处查看演示：
http://www.creativecontroller.com/demo/onepage/

这是我想要实现的目标：
- 单击导航链接，动画化为div - 在这种情况下，我使用的是 html5 部分（完成）
- 在URL中显示主题标签，例如...演示/一页/#about
- 如果用户单击另一个链接，它会动画化，更新URL主题标签并动画到正确的div
- 如果用户单击后退按钮，它会以动画形式返回到上一个div，而不仅仅是捕捉到它
- 尝试在不使用任何插件的情况下执行此操作（只是jQuery）

这是我用于页面滚动和粘性标题的jQuery：

// Page scrolling
$(function() {
    $('a').bind('click',function(event){
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 60
        }, 1500,'easeInOutExpo');
        event.preventDefault();
    });
});

// Sticky Nav
$(window).scroll(function(e) {
    var nav_anchor = $(".nav_anchor").offset().top;
    if ($(this).scrollTop() >= nav_anchor && $('.nav').css('position') != 'fixed') 
    {    
        $('.nav').css({
            'position': 'fixed',
            'top': '0px'
        });
        $('.nav_anchor').css('height', '60px');
    } 
    else if ($(this).scrollTop() < nav_anchor && $('.nav').css('position') != 'relative') 
    {   
        $('.nav_anchor').css('height', '0px');
        $('.nav').css({
            'position': 'relative'
        });
    }
});

任何帮助将不胜感激，谢谢！

更新：
我找到了一个网站，可以执行我上面描述的操作：
http://www.maddim.com/demos/spark-r6/

Answer 1

首先，将锚标记从绝对网址更改为相对网址（href="#about"而不是href="http://blahfdsjkld.com#about"）。然后像这样更新你的函数：

// Page scrolling
$(function() {
    $('a').bind('click',function(event){
        // Do this first
        event.preventDefault();
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 60
        }, 1500,'easeInOutExpo');
        // Use an id that isn't on the page, hence the capitalization of the first letter
        window.location.hash = $anchor.html().charAt(0).toUpperCase() + $anchor.html().slice(1);
    });
});