我正在尝试制作旋转木马，所以当一个人点击页面.animate的后箭头并向后滚动到故事的前一章。然而，在这种情况发生后，页面似乎卡住了，我不能再滚动了。我想知道为什么会这样？
$(function(){
/* -------------------------------------
GLOBAL VARIABLES
--------------------------------------*/
var nav = 72.5;
var splash = 750 + nav;
var one = $(".one").offset().top - nav;
var two = $(".two").offset().top - nav;
var three = $(".three").offset().top - nav;
var four = $(".four").offset().top - nav;
var five = $(".five").offset().top - nav;
/* -------------------------------------
PROGRESS BAR
--------------------------------------*/
$(window).scroll(function(){
var scroll = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scroll / (documentHeight - windowHeight)) * 100;
var position = scrollPercent;
$("progress").attr("value", position);
/* -------------------------------------
CHAPTER TEXT SWITCHING
--------------------------------------*/
if (scroll >= one && scroll <= two) {
$(".title").html("Chapter 1");
} else if (scroll >= two && scroll <= three) {
$(".title").html("Chapter 2");
} else if (scroll >= three && scroll <= four) {
$(".title").html("Chapter 3");
} else if (scroll >= four && scroll <= five) {
$(".title").html("Chapter 4");
} else if (scroll >= five) {
$(".title").html("Chapter 5");
} else {
$(".title").html('It could have been me');
};
/* -------------------------------------
ARROW CAROUSEL
--------------------------------------*/
$(".backward").click(function(){
if (scroll >= two && scroll <= three) {
$("body").animate({
scrollTop: $(".one").offset().top - splash
}, 1000);
} else {
console.log("Backward");
// $("html, body").animate({
// scrollTop: $(".two").offset().top
// }, 1000);
}
});
$(".forward").click(function(){
console.log("Forward");
});
})
});
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Name of Website</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
</head>
<body>
<nav>
<progress value="0" max="100"></progress><!-- /.progress -->
<div class="logo">
<img src="assets/img/logo.png" alt="" class="bdnsun">
</div><!-- .logo -->
<div class="details">
<p class="title">'It could have been me'</p>
<span class="dot first">●</span>
<span class="by">By</span>
<span class="byline">Nancy MacDonald</span>
<span class="dot second">●</span>
<span class="time">Time to Read:</span>
<span class="full">19 min</span>
</div><!-- .details -->
<div class="social">
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div><!-- .social -->
<div class="chapters">
<div class="backward" id="target" title="Previous chapter"><i class="fa fa-angle-left fa-4x"></i></div><!-- /.backward -->
<div class="forward" title="Next chapter"><i class="fa fa-angle-right fa-4x"></i></div><!-- /.forward -->
</div><!-- .chapters -->
</nav>
<main>
<div class="splash" id="top">
<div class="teaser">
<h1>'It could have been me'</h1>
<p class="subhead">Thirteen women share their remarkable stories</p>
<p class="byline-alt">Nancy MacDonald</p>
</div><!-- .splash -->
</div>
<div class="wrapper">
<div class="chapter one">
<p>Wolf kale chips stumptown fanny pack, vegan kogi asymmetrical. Locavore polaroid sustainable Blue Bottle, farm-to-table kogi plaid keytar Tumblr occupy gluten-free. Pitchfork shabby chic lo-fi flannel, bitters hella readymade. Ethical meggings master cleanse Schlitz mustache Blue Bottle, <span class="highlight">American Apparel</span> dreamcatcher vinyl Tumblr. Scenester try-hard Portland master cleanse. Skateboard tofu mumblecore, swag retro aesthetic kale chips American Apparel lo-fi normcore bespoke Helvetica synth. Tousled Brooklyn DIY, quinoa Etsy chambray umami.</p>
<p>Meh literally freegan, church-key Tumblr sustainable mlkshk sriracha Pitchfork. Migas stumptown deep v lumbersexual. Cray roof party skateboard scenester hashtag, plaid distillery wayfarers banjo ethical artisan. Skateboard irony Portland deep v, cliche DIY Pinterest brunch Echo Park tilde Helvetica. Etsy stumptown chambray craft beer four loko brunch, twee mustache. Crucifix yr synth, irony mlkshk polaroid master cleanse iPhone mixtape twee direct trade keytar. Brooklyn Pinterest migas Portland gluten-free.</p>
<blockquote>
<span class="quote">“</span>
Meh literally freegan, church-key Tumblr sustainable mlkshk sriracha Pitchfork. Migas stumptown deep v lumbersexual.
</blockquote>
<p>Blog cold-pressed vinyl Shoreditch organic put a bird on it. Salvia put a bird on it swag chillwave Bushwick, fanny pack stumptown art party selvage narwhal. Readymade distillery asymmetrical bespoke. Blue Bottle bitters tofu, Austin retro meh gentrify tattooed American Apparel Banksy. Try-hard whatever pug tousled DIY lomo. Marfa pop-up shabby chic messenger bag Intelligentsia. Kale chips gastropub viral, Helvetica forage disrupt mumblecore mlkshk Brooklyn vegan.</p>
</div><!-- .chapter -->
<div class="chapter two">
<p>Chapter 2</p>
</div><!-- .chapter -->
<div class="chapter three">
<p>Chapter 3</p>
</div><!-- .chapter -->
<div class="chapter four">
<p>Chapter 4</p>
</div><!-- .chapter -->
<div class="chapter five">
<p>Chapter 5</p>
</div><!-- .chapter -->
</div><!-- /.wrapper -->
</main>
<p class="more">Read More</p>
<footer>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
答案 0 :(得分：1)
我可以看到你在滚动处理程序中创建了点击处理程序。这意味着在滚动一次（创建处理程序时）之前不能单击。这也意味着每次滚动时都会创建一个新的点击处理程序，因此您的点击处理代码会被多次调用。如果你滚动了很多，那么你就会被所有这些电话卡住。
尝试在滚动方法之外拉动处理程序。
编辑：这是一个更新的小提琴：http://jsfiddle.net/brendaz/z03dm3pL/。如果章节给出了“chapter-”+ chapterId类，那么您可以按编号参考当前章节。这将删除所有if语句并消除你的代码：
function getCurrentChapter() {
var scroll = $(window).scrollTop();
var currentChapter = 1;
while (currentChapter < NUM_CHAPTERS &&
scroll>=Math.floor($(".chapter-"+(currentChapter+1)).offset().top-nav)) {
currentChapter++;
}
return currentChapter;
}