制作转盘，可以't在点击功能动画化后滚动(更新了JSFiddle链接）
Making carousel, can't scroll after click function animates (JSFiddle link updated)
问题
我正在尝试制作一个旋转木马，所以当一个人单击后退箭头时，页面.animate会滚动回故事的前一章。然而，发生这种情况后，页面似乎被卡住了，我无法再滚动了。我想知道为什么会发生这种事？
更新#2-JSFiddle更新：http://jsfiddle.net/vzt2s4b5/4/
$(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");
});
})
});
index.html
<!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>
我可以看到您在滚动处理程序中创建了点击处理程序。这意味着只有滚动一次(创建处理程序时(才能单击。这也意味着您将为每次滚动创建一个新的点击处理程序，因此您的点击处理代码将被多次调用。如果你滚动了很多，那么你就会被那些电话卡住。
尝试将处理程序拉到滚动方法之外。
编辑：这是一个更新的小提琴：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;
}
相关文章：
- 滚动动画代码不起作用
- CSS滚动动画赢得'不要在django跑步
- 我想要一个类似于网站 https://onlycoin.com/ 的jQuery鼠标滚动动画效果
- 如何在没有外部插件的情况下在jQuery中制作一个滚动动画
- 使用鼠标滚轮控制页面滚动动画
- Jquery 代码不适用于页面上的滚动动画
- 滚动动画无法正常工作;当我单击链接时，我被定向但没有动画
- JQuery 页面滚动动画仅适用于镶边
- 滚动动画会断开页面上的链接
- 为什么这个滚动动画不起作用
- 从某些ID中排除滚动动画功能
- 导航栏特定的 jQuery 滚动动画
- 使用 jQuery 和 ScrollMagic 滚动动画时间轴
- 如何使用jQuery在移动网络浏览器上设置滚动动画
- 如何制作水平/垂直滚动动画
- 如何停止滚动动画
- 在单个页面上的各个部分之间滚动动画?(仅限javascript）
- 滚动动画的jQuery错误无法解释
- 随时间平滑滚动动画距离
- 在使滚动动画不触发滚动事件时遇到问题
