滑動到網站中的不同頁面

Question

我正在使用Zurb Foundation創建一個小型網站，並且我有一個帶有四個鏈接的頂部導航欄。
在單擊每個鏈接時，我想每次水平滑動到另一個頁面 。

頁面中的內容應該通過ajax加載，而不是在訪問索引頁面本身上加載所有頁面。
（注意：幻燈片頁面的內容不應在幻燈片動畫之后加載，而應以幻燈片本身的方式加載，否則空的幻燈片看起來會有些怪異）

另外，由於我使用基礎來獲得響應式布局，所以我很困惑如何水平放置不同頁面的部分。 如果該網站沒有響應，我可能會將其他頁面放置在margin屬性之間並滑動它們，就可以對margin屬性進行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
    }
});

希望能幫助到你 ：）