JQuery - 滑動

Question

我看到this website在這裏，當我們點擊下一個或上一個按鈕時，它會滑動不同的網頁。我想要相同的效果，但我找不到方法來做到這一點。你可以用HTML，CSS和JQuery或Javascript代碼發佈答案嗎？

Answer 1

在這裏，只有一種方法！

HTML

<div id="item1" class="page"><a href="#item2">1</a></div> 
<div id="item2" class="page"><a href="#item3">2</a></div> 
<div id="item3" class="page"><a href="#item4">3</a></div> 
<div id="item4" class="page"><a href="#item1">4</a></div> 

CSS

html, body {height:100%; margin:0; overflow-y:hidden} 
.page {position:absolute; width:100%; height:100%} 
#item1 {left:0%; background:#222} 
#item2 {left:100%; background:#444} 
#item3 {left:200%; background:#666} 
#item4 {left:300%; background:#888} 

JS

$(function() { 
    $('a[href*=#]').on('click', function(e) { 
     var hash = $(this.hash).position(); 
     if (hash) { 
      $('html, body').stop().animate({ 
       scrollLeft: hash.left 
      }, 600, 'swing'); 
      e.preventDefault(); 
     } 
    }); 
}); 

Answer 2

只需製作一個超寬網站，然後使用Javascript滾動到下一節。

使用框架可能是您的解決方案。檢查這個link