我想知道是否有人可以帮助我。我正在使用教程http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal -page-scrolling-with-jquery/来使用他们的滚动方法。但是由于某种我看不到的原因，它对我不起作用。
我的 HTML 文件如下所示：
<!doctype html>
<html>
<head>
<title>Coming Soon - OneSG Buying Club</title>
<meta name="viewport" content="initial-scale=1.0; minimum-scale=1, maximum-scale=1"/>
<!--CSS Code Links-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
<link rel = "Stylesheet" type = "text/css" href = "css/styles.css"/>
<!--JS and JQuery Code Links-->
<script type="text/javascript" src = "js/jquery-1.10.2.js"></script>
<script type ="text/javascript" src = "js/jquery/easing.min.js"></script>
<script type="text/javascript" src = "js/scripts.js"></script>
</head>
<body>
<div id = "wrapper">
<section id = "screen1">
<div class = "pageNum">
<p>1</p>
</div>
<h2>Coming Soon</h2>
<div class = "vLine"></div>
<div class = "hLine"></div>
<div id = "next">
<a href = "#screen2">
<img id = "nextR" src = "img/textH.png"/>
<img id = "arrowR" src = "img/arrowRight.png"/>
</a>
</div>
<img id = "socket" src = "img/electric.png"/>
<div class = "vLine2"></div>
<div class = "hLine2"></div>
</section>
<section id = "screen2">
<div id = "track"></div>
<div id = "pageNum2">
<p>2</p>
</div>
<div id = "transbox"></div>
<div id = "transbox2"></div>
<h2>This Website is a <span>placeholder for something</span> Amazing</h2>
<aside>
<img id = "router" src = "img/router.png"/>
<div id ="next2">
<img id = "vNext" src = "img/textV.png"/>
<img id = "vArrow" src = "img/arrowDown.png"/>
</div>
</aside>
<div id = "cable"></div>
<div id = "cable2"></div>
</section>
<section id = "screen3">
<div id = "trackbar"></div>
<div id = "pageNum3">
<p>3</p>
</div>
<div id = "transbox3"></div>
<div id = "transbox4"></div>
<div id = "cable3"></div>
<div id = "cable4"></div>
<div id = "cable5"></div>
<p id = "moreinfo">More Info?</p>
<div id = "next3">
<img id = "arrow3" src = "img/arrowLeft.png"/>
<img id = "text3" src = "img/textH.png"/>
</div>
</section>
<section id = "screen4">
<div id = "trackbar4"></div>
<div id = "pageNum4">
<p>4</p>
</div>
<div id = "transbox5"></div>
<div id = "cable6"></div>
<div id = "cable7"></div>
<aside>
<img id = "me" src = "img/illustration.png"/>
<img id = "arrowup" src = "img/arrowUp.png"/>
</aside>
<p id = "contactus">Contact Us</p>
</section>
</div>
</body>
</html>
我的 Javascript 看起来像：
$(document).ready(function() {
// Call the pageLayout function
pageLayout();
$('#next').bind('click',function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $(anchor.attr('href')).offset().left
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Set Width and Height of sections and place them
function pageLayout() {
// Create variables to store width and height of screen
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var wrapperWidth = screenWidth * 2;
var wrapperHeight = screenHeight * 2;
// Set each section to the screen width and height
$("#wrapper").css({'height': wrapperHeight + 'px', 'width': wrapperWidth + 'px'});
$("#screen1").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left':'0', 'top':'0', 'position':'absolute'});
$("#screen2").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left': screenWidth + 'px', 'top':'0', 'position':'absolute'});
$("#screen3").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left': screenWidth + 'px', 'top': screenHeight + 'px', 'position':'absolute'});
$("#screen4").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left':'0', 'top': screenHeight + 'px', 'position':'absolute'});
}
有谁知道为什么它不起作用？？？