jQuery：我如何滑动页面，但只使用一个导航？

Question

我发现这个教程： http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

而且我喜欢这个网站做了滑动的方式：http://dknewmedia.com

我怎样做滑动效果像DK的新媒体，但只有一个单一的导航？

Answer 1

您可以将导航元素放置在包含页面其余部分的包装元素之外;绝对定位导航元素并上下移动包装。

HTML：

<ul id="nav"> 
    <li><a href="#page1">Page 1</a></li> 
    <li><a href="#page2">Page 2</a></li> 
    <li><a href="#page3">Page 3</a></li> 
</ul> 
<div id="wrapper"> 
    <div id="page1">Content for page 1</div> 
    <div id="page2">Content for page 2</div> 
    <div id="page3">Content for page 2</div> 
</div> 

CSS：

#nav { position: absolute; top: 0; right: 50px; z-index: 50; } 
#nav > li { float: left; padding: 5px 10px; } 
#wrapper { height: 500px; overflow: hidden; position: relative; z-index: 20; } 
#wrapper > div { width: 100%; height: 500px; } 

JS：

$(function() { 
    $('#nav a').click(function() { 
     pageId = $(this).attr('href'); 
     num = $('#nav a').index(this); 
     $(pageId).parent().animate({scrollTop: (500 * num)}, 'slow'); 
    }); 
});​ 

您可以在http://jsfiddle.net/L6Q5V/尝试。您可能需要优化代码。

Answer 2

我认为有两种方法可以实现这一点：1）您可以从动画区域中排除导航，2）您可以为导航和其他内容制作两个单独的动画，以便您的导航简单地关闭屏幕，然后从下面返回。这是想法。