javascript - 减慢 Jquery 滚动的速度

Question

我一直在使用 jQuery 滚动来增强我的视差滚动页面。具体来说就是这个。 JQuery Scroll to Next Section

我对 jQuery 完全陌生(过去只使用过一些相当基本的 JavaScript)。我可以弄清楚如何根据我的需要更改和调整代码，但我不知道如何减慢滚动条的速度。

问题是，为了容纳页面中的所有内容，它需要大约 17000 像素高。我只希望滚动条滚动到页面底部，然后返回顶部(中间没有任何停止)，但是当单击时，当前滚动 17000px 需要大约 1 秒。这意味着您无法阅读显示的任何文本。我希望滚动动画的最大速度约为每秒 1000 像素。我该怎么做？

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 像素的速度滚动。