在本教程中，我们将使用jQuery创建一个简单的平滑滚动效果。我们将创建一个水平和垂直的网站布局来显示效果。我们将使用jQuery放松插件和几行jQuery。
所以,让我们开始吧!
我们的示例页面的标记将非常简单。我们将有三个部分的标题和一段，并且是一个无序的导航列表:
<div class="section black" id="section1"> <h2>Section 1</h2> <p> MY Spectre around me night and day Like a wild beast guards my way; My Emanation far within Weeps incessantly for my sin. </p> <ul class="nav"> <li>1</li> <li><a href="#section2">2</a></li> <li><a href="#section3">3</a></li> </ul></div><div class="section white" id="section2"> <h2>Section 2</h2> <p> A fathomless and boundless deep, There we wander, there we weep; On the hungry craving wind My Spectre follows thee behind. </p> <ul class="nav"> <li><a href="#section1">1</a></li> <li>2</li> <li><a href="#section3">3</a></li> </ul></div><div class="section black" id="section3"> <h2>Section 3</h2> <p> He scents thy footsteps in the snow Wheresoever thou dost go, Thro' the wintry hail and rain. When wilt thou return again? </p> <ul class="nav"> <li><a href="#section1">1</a></li> <li><a href="#section2">2</a></li> <li>3</li> </ul></div>两个例子的HTML都是一样的。
让我们来看看它的风格
CSS由于我们有两个示例，我们将从水平页面样式开始。
主要的想法是使这些区段非常宽，并达到100%的高度。我们将在每个部分的右下角添加背景图像:
*{ margin:0; padding:0;}body{ background:#000; font-family:Georgia; font-size: 34px; font-style: italic; letter-spacing:-1px; width:12000px; position:absolute; top:0px; left:0px; bottom:0px;}.section{ margin:0px; bottom:0px; width:4000px; float:left; height:100%; text-shadow:1px 1px 2px #f0f0f0;}.section h2{ margin:50px 0px 30px 50px;}.section p{ margin:20px 0px 0px 50px; width:600px;}.black{ color:#fff; background:#000 url(../images/black.jpg) no-repeat top right;}.white{ color:#000; background:#fff url(../images/white.jpg) no-repeat top right;}.section ul{ list-style:none; margin:20px 0px 0px 550px;}.black ul li{ float:left; padding:5px; margin:5px; color:#aaa;}.black ul li a{ display:block; color:#f0f0f0;}.black ul li a:hover{ text-decoration:none; color:#fff;}.white ul li{ float:left; padding:5px; margin:5px; color:#aaa;}.white ul li a{ display:block; color:#222;}.white ul li a:hover{ text-decoration:none; color:#000;}我们需要给身体一个有效的高度，因为我们希望能够将高度定义为100%。把身体完全定位在上面:0px和底部:0px我们伸展身体，给它一个高度。
垂直页面布局的样式将如下所示:
*{ margin:0; padding:0;}body{ background:#000; font-family:Georgia; font-size: 34px; font-style: italic; letter-spacing:-1px;}.section{ margin:0px; height:4000px; width:100%; float:left; text-shadow:1px 1px 2px #f0f0f0;}.section h2{ margin:50px 0px 30px 50px;}.section p{ margin:20px 0px 0px 50px; width:600px;}.black{ color:#fff; background:#000 url(../images/black_vert.jpg) repeat-x bottom left;}.white{ color:#000; background:#fff url(../images/white_vert.jpg) repeat-x bottom left;}.section ul{ list-style:none; margin:20px 0px 0px 550px;}.black ul li{ float:left; padding:5px; margin:5px; color:#aaa;}.black ul li a{ display:block; color:#f0f0f0;}.black ul li a:hover{ text-decoration:none; color:#fff;}.white ul li{ float:left; padding:5px; margin:5px; color:#aaa;}.white ul li a{ display:block; color:#222;}.white ul li a:hover{ text-decoration:none; color:#000;}这里没什么特别的，只是我们给这些区域一个很大的高度。背景图像定位在左下角。
让我们添加JavaScript
JavaScript水平滚动效果的功能如下:
$(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); event.preventDefault(); }); });垂直滚动效果的功能如下:
$(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500,'easeInOutExpo'); /* if you don't want to use the easing effects: $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1000); */ event.preventDefault(); }); });您可以使用其中一个缓解效果来动画到相应的元素。您可以在垂直演示中看到效果。
如果没有启用JavaScript，我们仍然有很好的旧滚动条。
看看这个演示，它会把你带到水平页面。这里是垂直页面滚动演示的直接链接，或者简单地单击水平演示中的链接。
