滑到網站的不同頁面

Question

我使用Zurb Foundation創建一個小網站，我有一個帶有四個鏈接的頂部導航欄。
點擊每個鏈接，我想每次水平滑動到不同的頁面。

頁面中的內容應該通過ajax加載，而不是在訪問索引頁面上加載所有頁面。
（注：內容滑動到頁面不應該幻燈片動畫後，但不知何故，與幻燈片本身或者裝載的空滑看起來有點怪異）

此外，由於我使用的基礎上得到響應佈局，我很困惑如何水平放置不同頁面的部分。如果網站沒有響應，我可能會將其他頁面放在一個保證金屬性中並滑動它們，我可以完成保證金屬性的animate。

但是，如何在當前頁面上獲得水平頁面滑動效果（以及Ajax加載）？

Answer 1

我想你想要一個'單頁網站'？有很多關於這個教程，但是這個人是偉大的：

http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/

現場演示可以在這裏找到：

http://vandelaydesign.com/demos/single-page/

這使用jQuery的滾動到一個元素頁面上的特定ID。當您單擊其中一個菜單項時，它會自動滾動/滑動到頁面的該部分。

僅僅因爲代碼有點長，我只會發布jquery，給你一個想法。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#topnav').onePageNav({ 
    currentClass: 'current', 
     scrollOffset: 0 
    }); 
}); 
</script> 

$('#nav').onePageNav({ 
    currentClass: 'current', 
    changeHash: false, 
    scrollSpeed: 750, 
    scrollOffset: 30, 
    scrollThreshold: 0.5, 
    filter: '', 
    easing: 'swing', 
    begin: function() { 
     //I get fired when the animation is starting 
    }, 
    end: function() { 
     //I get fired when the animation is ending 
    }, 
    scrollChange: function($currentListItem) { 
     //I get fired when you enter a section and I pass the list item of the section 
    } 
}); 

希望它能幫助:)