JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<body class="page-scroller">
  <section class="hero-banner">full screen section</section>
  <div class="trigger-scroll">&gt;</div>
  <section class="scroll-here">some content 1</section>
  <section class="scroll-here">some content 2</section>
  <section class="scroll-here">some content 3</section>
</body>

CSS

section { display:block; position:relative; min-height: 700px; }
.trigger-scroll {
    box-sizing: border-box;
    display: inline-block;
    border: 1px #f60 solid;
    background: #f96;
    bottom: 20px;
    width: 34px;
    height: 34px;
    position: fixed;
    right: 20px;
    padding: 8px 10px;
    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: 1em;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.8;
    box-shadow: 1px 0px 1px 1px rgba(102,51,0, .25);   
 }
.trigger-scroll:hover { background: #f60; border-color: #c30; }
.trigger-scroll.go-to-top {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

JavaScript

$(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

            });