连续滚动视口高度直到结束

Question

我有这段代码，当单击固定按钮时，可以逐节滚动视口高度，直到到达终点。然后我想淡出按钮。

该目录

<a class="cd-go">
<img class="scroll-swipe" src="<?php bloginfo('template_directory'); ?>/img/scroll_down_arrow.svg">
</a><!-- scroll btn -->

js：

$(document).on('click', '.cd-go', function(event){                        
event.preventDefault();
var viewportHeight = $(window).height();
$('html, body').animate({
scrollTop: viewportHeight,
complete: function () {
$('.cd-go').fadeOut(300);
}
}, 500);
});

问题是它只是从第一部分滚动到第二部分。这怎么可能逐节直到底部？

编辑： 这里有一个小提琴：http://jsfiddle.net/cyt57dsj/7/

Answer 1

只需放置$(document).height()而不是$(window).height():)

Answer 2

您可以跟踪当前部分，并将viewportHeight乘以当前部分。这样，您可以逐节滚动。

var currentSection = 0;
var totalSections = document.querySelectorAll("section").length;
$(document).on('click', '.cd-go', function(event){                        
event.preventDefault();
var viewportHeight = $(window).height();
currentSection++;
if (currentSection > totalSections - 1) currentSection = totalSections - 1;
$('html, body').animate({
scrollTop: viewportHeight * currentSection,
complete: function () {
$('.cd-swipe').slideDown(300);
}
}, 500);
});

.cd-go {
	width: 209px;
background: rgba(0,0,0, 0.17);
height: 212px;
border-radius: 212px;
color: #fff;
position: fixed;
bottom: -106px;
text-align: center;
left: 0;
right: 0;
margin: 0 auto;
}
.w-sec {
height:100vh;
}
.w-sec:first-of-type {
background:#fff;
}
.w-sec:nth-of-type(2) {
background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cd-go">
			DOWN
</a><!-- scroll btn -->
<section id="section1" class="w-sec cd-section">
	content
</section><!-- section 2 -->
<section id="section2" class="w-sec cd-section">
	content
</section><!-- section 2 -->
<section id="section3" class="w-sec cd-section">
	content
</section><!-- section 2 -->

Answer 3

试试这个，

$(document).on('click', '.cd-go', function(event){                        
event.preventDefault();
var viewportHeight = $(document).height();
$("html, body").animate({
scrollTop: viewportHeight,
}, {
duration: 500,
complete: function () {
$('.cd-swipe').slideDown(300);
}
});
});

您正在滚动窗口而不是文档