JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="banner">
  <div class="scroll-bottom"> <i class="icon-mouse">mouse</i>Keep Scrolling </div>
</div>
<a href="http://codepen.io/nikhil8krishnan/pen/EPpXwx?editors=1100" class="">Try another</a>

SCSS

.banner {
  background-color: grey;
}

.scroll-bottom {
  position: absolute;
  bottom: 20px;
  width: 120px;
  left: 50%;
  margin-left: -50px;
  color: #5c5c5c;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  i {
    display: block;
    color: lighten(#5c5c5c, 10);
    font-size: 30px;
    margin-bottom: 15px;
    position: relative;
    @include animation(ani-mouse 1.5s linear infinite);
  }
}

@-webkit-keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 0px;
  }
  50% {
    opacity: 0;
    top: 10px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}

@-moz-keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 0px;
  }
  50% {
    opacity: 0;
    top: 10px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}

@keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 0px;
  }
  50% {
    opacity: 0;
    top: 10px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}

JavaScript

$(window).on("resize", function() {
  //banner height
  $('.banner').height($(window).height());
}).resize();

// banner icon click scroll to bottom 
$('.scroll-bottom').click(function() {
  $("html, body").animate({
    scrollTop: $('.banner-section').height()
  });
});