減慢JQuery滾動的速度

Question

我一直在使用jQuery滾動來增強我的視差滾動頁面。具體來說，這一個。 JQuery Scroll to Next Section

我完全不熟悉jQuery，（以前只使用過一些相當基礎的JavaScript）。我可以研究如何更改和修改符合我需求的代碼，但我不知道如何減慢滾動條的速度。

問題是，爲了容納我的頁面中的所有內容，它需要高約17000px。我只希望滾動滾動到頁面底部，然後回到頂部（沒有任何停止介於兩者之間），但點擊時，它現在需要大約1秒滾動17000px。這意味着您無法閱讀任何顯示的文字。我希望滾動動畫以每秒大約1000px的速度最大化。我將如何做到這一點？

HTML

<div class="background fixed"></div> 
<div class="trigger-scroll">&gt;</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); 
} 

Answer 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個像素。