Скольжение на разные страницы на сайте

Question

Я использую Zurb Foundation для создания небольшого веб-сайта, и у меня есть верхняя панель навигации с четырьмя ссылками.
При щелчке по каждой ссылке, я хочу, чтобы горизонтально скользить на другую страницу каждый раз.

Содержимое страницы должно быть загружено с помощью ajax, а не для загрузки всех страниц на самой странице индексации.
(примечание: содержимое для слайд-страницы должно быть загружено не после анимации слайдов, но каким-то образом с самим слайдом, иначе пустые сдвиги выглядят немного странно)

Кроме того, поскольку я использую основу для получения ответа макеты, я смущен, как разместить разделы для разных страниц по горизонтали. Если бы веб-сайт не был отзывчивым, я бы, вероятно, поместил бы другие страницы, разделенные свойством margin, и чтобы сместить их, я мог бы сделать animate свойства margin.

Но как мне получить горизонтальный эффект скольжения страницы (вместе с загрузкой ajax) на моей текущей странице?

Answer 1

Я думаю, что вам нужен сайт с одной страницей? Есть много учебников по этому поводу, но это один велик:

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

Живое демо можно найти здесь:

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

Это использует JQuery для прокрутки элемента с конкретный идентификатор на странице. Когда вы нажимаете один из пунктов меню, он автоматически прокручивает/перемещается в эту часть страницы.

Просто потому, что код немного длинный, я отправлю только 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 
    } 
}); 

Надеется, что это помогает :)