jQuery单页滚动站点-动画深度链接

我正在一个单页滚动网站（有一个粘性的标题）上工作，希望添加动画深度链接

您可以在此处查看演示：

以下是我试图实现的目标：
-单击导航链接，将动画设置为div-在本例中，我使用的是html5部分（完成）
-在url中显示标签，如…demo/onepage/#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'
        });
    }
});

//页面滚动
$（函数（）{
$（'a'）.bind（'click'，函数（事件）{
var$anchor=$（此）；
$（'html，body'）.stop（）.animate({
scrollTop:$（$anchor.attr（'href'））.offset（）.top-60
}，1500年，“easeInOutExpo”）；
event.preventDefault（）；
});
});
//粘性导航
$（窗口）。滚动（功能（e）{
var nav_anchor=$（“.nav_anchor”）.offset（）.top；
if（$（this）.scrollTop（）>=nav_锚定&$（'.nav'）.css（'position'）！='fixed'）
{    
$（'.nav'）.css({
'位置'：'固定'，
“顶部”：“0px”
});
$（'nav_anchor'）.css（'height'，'60px'）；
} 
else if（$（this）.scrollTop（）

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

更新：
我找到了一个符合我上面描述的内容的网站：

---

首先，将锚定标记从绝对URL更改为相对URL（

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

---

问题在哪里？听起来你希望有人为你编写一个完整的UI问题是：有人能告诉我怎么做吗？嗨NBSP，谢谢你的帮助，但是添加你建议的两行代码会使整个页面一次跳跃几个像素。这可能是因为在动画功能完成之前页面被告知直接跳转到锚点？它是否以某种方式覆盖了它？是的，我认为你完全正确。我将添加

window.location.hash=$anchor.haml（）行到jQuery
.anmiate（）
的
完成
回调。我知道你要做什么，但一旦我这样做，它就完成了动画，然后跳到锚。这确实做了一些类似于我所追求的事情，但一旦你点击后退按钮，它就会跳到最后一个锚点，而不是动画。这个网站做到了我想要的：再次感谢你的时间：）我已经更新了我的答案。它不处理使用“后退”按钮滚动的问题（它只是跳到部分），但应涵盖其余内容。@nbsp绝对URL不起作用吗？如果可能的话，这对搜索引擎优化不是更好吗？