我一直在使用jQuery滚动来增强我的视差滚动页面。具体来说，这个。 JQuery Scroll to Next Section
我是jQuery的新手，（过去只使用过一些相当基本的JavaScript）。我可以找出如何根据我的需求更改和调整代码，但我不知道如何减慢滚动条的速度。
问题是，为了容纳我页面中的所有内容，它需要大约17000px高。我只希望滚动条滚动到页面底部然后返回到顶部（中间没有任何停止），但是当单击它时，它当前需要大约1秒来滚动17000px。这意味着您无法读取显示的任何文本。我希望滚动动画最大速度大约为每秒1000像素。我该怎么做？
HTML
<div class="background fixed"></div>
<div class="trigger-scroll">></div>
<!-- Sections Id'd 1 through 5 -->
<section id="slide-6" class="homeSlide">
<div class="bcg center fixed"
data-0="top:200%; opacity:0;"
data-16000="top:200%; opacity:1;"
data-17000="top:90%;"
data-end="top:90%;">
<div class="hsContainer">
<div class="center middle">
<h2>View my portfolio!</h2>
<a href="portfolio.html"><img class="portfolio" src="img/r3gamersHome.png"/></a>
</div>
</div>
</div>
</section>
<section id="slide-7" class="homeSlide scroll-here">
<div class="hsContainer">
<div class="hsContent bottom"
>
<h3>TEST</h3>
</div>
</div>
</section>
Javascript
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 2900;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
}
} )( jQuery );
var s = skrollr.init();
s.refresh($('.homeSlide'));
$(document).ready(function() {
/* run scroll to section only
if body has class page-scroller */
var pageScroller = $( 'body' ).hasClass( 'page-scroller' );
if ( pageScroller ) {
// begin homepage scroll to section
var $scrollSection = $('.scroll-here');
var $scrollTrigger = $('.trigger-scroll');
var nextSection = 0;
$scrollTrigger.on( 'click', function() {
$(this).removeClass('go-to-top');
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
// If already scrolled down
// to find next section position so you don't go backwards:
while ( $('body').scrollTop() > $($scrollSection[nextSection]).offset().top ) {
nextSection++;
}
// If next section is the last, add class to rotate arrow:
if (nextSection === ($scrollSection.length - 1)) {
$(this).addClass('go-to-top');
}
// Move to next section and increment counter check:
$( 'html, body' ).animate({ scrollTop: $($scrollSection[nextSection]).offset().top }, 1000);
nextSection++;
});
// end homepage scroll to section
}else{
console.log('page-scroller class was not found in body tag');
}//end if else
});
CSS（可能并不相关，所以我只添加了最低限度，以防万一）
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
.hsContainer {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.hsContent {
max-width: 700px;
position: absolute;
}
.hsContent h2 {
color: #fff8de;
padding: 10px 5px;
font-size: 30px;
}
@media screen and (max-height: 400px) {
.hsContent h2 {
font-size: 25px;
}
}
.hsContent h3 {
color: #fff8de;
padding: 10px 5px;
line-height: 20px;
margin-bottom: 5px;
}
@media screen and (max-height: 400px) {
.hsContent h3 {
font-size: 15px;
padding: 5px 2.5px;
margin-bottom: 2px;
}
}
.hsContent h4 {
color: #fff8de;
padding: 10px 5px;
line-height: 15px;
margin-bottom: 5px;
}
@media screen and (max-height: 400px) {
.hsContent h4 {
font-size: 10px;
}
}
.hsContent p {
width: 400px;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.fixed {
position: fixed;
}
.center{
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
.middle {
text-align: center;
margin: 0px;
padding-top: 40px;
width: 100%;
min-width: 300px;
}
@media screen and (max-height: 400px) {
.middle {
padding-top: 15px;
}
}
#slide-6 .bcg {background-color: rgb(208, 208, 208);
top: 100%;
box-shadow: inset 5px 5px 20px black;
}
#slide-6 .hsContent {
top: 0px;
text-align: center;
}
#slide-7 .hsContent {
max-height: 100px;
}
.trigger-scroll {
box-sizing: border-box;
display: inline-block;
border: 1px #f60 solid;
bottom: 20px;
width: 68px;
height: 68px;
position: fixed;
right: 20px;
padding: 16px 20px;
transition: transform 500ms ease-in-out;
z-index: 50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
font-weight: 700;
text-shadow: 0 1px 0 #fff;
color: #fff;
font-family: verdana;
font-size: 2em;
line-height: 1;
cursor: pointer;
border-radius: 3px;
opacity: 0.8;
box-shadow: 1px 0px 1px 1px rgba(102,51,0, .25);
}
@media screen and (max-height: 400px) {
.trigger-scroll {
width: 51px;
height: 51px;
font-size: 1.5em;
padding: 12px 15px;
}
}
.trigger-scroll:hover { background: #f60; border-color: #c30; }
.trigger-scroll.go-to-top {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
答案 0 :(得分：1)
在本节的第三行中，更改1000：
// If at last section, scroll back to top on next click:
if (nextSection >= $scrollSection.length) {
$('html, body').animate({ scrollTop: 0 }, 1000);
nextSection = 0;
return;
}
到$(document).height()，就像这样：
$('html, body').animate({ scrollTop: 0 }, $(document).height());
这将使动画以每秒1000像素的速度滚动。