up/down page section

control.js

$(document).ready(function () {
  //Move Next section
  var $sec = $("section");
  $(".arrow-down ").click(function(){
      var y = $sec.filter(function(i, el) {
          return el.getBoundingClientRect().bottom > 100;
      })[$(this).hasClass("arrow-down")?"next":""]("section").offset().top;
      $("html, body").stop().animate({scrollTop: y});
  });

  $(".arrow-up").click(function() {
    $('html, body').animate({
      scrollTop: $("html, body").offset().top
    }, 2000);
  });
});


// arrow
$(window).scroll(function(event){
  var scroll = $(window).scrollTop();
    if (scroll >= 300 && scroll <2000) {
      $('.arrow-down').removeClass('hidden');        
      $(".arrow-down").addClass("show");
      $('.arrow-up').removeClass('hidden');
    } 
    else if (scroll >=2000) {
      $('.arrow-up').removeClass('hidden');
      $('.arrow-down').addClass('hidden');
      $('.arrow-up').addClass('show')
    }
    else {
      $(".arrow-bottom").removeClass("show");
    }
});

index.slim

// pages content
section.red 1
section.blue style="height:500px;"  2
section.green 3
section.yellow style="height:600px;"  4
section.brown 5


// arrow button
span.arrow-bottom.arrow-up
  i.fa.fa-angle-up
span.arrow-bottom.arrow-down
  i.fa.fa-angle-down
  
  
  

style.sass

.arrow-bottom
  width: 40px
  height: 40px
  line-height: 35px
  text-align: center
  font-size: 30px
  position: fixed
  bottom: -40px
  border-radius: 50%
  right: 20px
  -webkit-transition: all 1s ease
  -moz-transition: all 1s ease
  -o-transition: all 1s ease
  transition: all 1s ease
  background-color: #404040
  color: #FFFFFF
  text-decoration: none
  background: #404040
  cursor: pointer

.arrow-bottom.show 
  bottom: 20px
.arrow-bottom:hover
  background-color: #ff4542
  color: #FFFFFF