jQuery單頁滾動網站 - 動畫深度鏈接

Question

我正在一個頁面滾動網站（與粘滯標題），並希望添加動畫深層鏈接。

您可以查看這裏的演示：
http://www.creativecontroller.com/demo/onepage/

這裏就是我想要實現：
- 點擊導航鏈接，動畫到DIV - 在這種情況下，我使用HTML5的部分（DONE ）
- 已經顯示在URL中包括hashtag像...演示/ onepage /＃約
- 如果用戶點擊另一個鏈接，它動畫，更新網址井號標籤和動畫向右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' 
     }); 
    } 
}); 

任何幫助，將不勝感激，謝謝！

UPDATE：
我發現了一個網站，做什麼我上面描述：
http://www.maddim.com/demos/spark-r6/

Answer 1

首先，改變你的錨標籤從絕對到相對的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); 
    }); 
});