Scroll Down Anchor Button

Scroll Down Anchor Button

by Solodev CMS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>

<section class="company-heading intro-type" id="parallax-one">
  <div class="container">
    <div class="row product-title-info">
      <div class="col-md-12">
        <h2 class="display-4 mb-0">Be part of the <br />
        <span class="d-block font-weight-bold">Lunar XPerience</span></h2>
      </div>
       <a class="ct-btn-scroll ct-js-btn-scroll" href="#section2"><img alt="Arrow Down Icon" src="https://raw.githubusercontent.com/solodev/scroll-down-anchor/master/images/arrow-down-1.png"></a>
    </div>
  </div>
  <div class="parallax" id="parallax-cta" style="background-image:url(https://raw.githubusercontent.com/solodev/scroll-down-anchor/master/images/rocket.jpg);">
    &nbsp;
  </div>
</section>
<div class="main">
  <section id="section2">
    <div class="container jumbo">
      <div class="jumbotron">
        <h2>Where You Want to Go</h2>
        <p>When you click on the scroll down arrow, this is where you will end up.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
  </section>
</div>
</div>
</body>

CSS

body {
  overflow: scroll;
}

.separator-type, .title-type, .intro-type, .content-type .intro-type p {
    position: relative;
}
.intro-type .container {
    padding: 107px 0px 102px 0px !important;
}
.company-heading h1 {
    margin-bottom: 60px;
    padding-bottom: 50px;
    line-height: 80px;
    color: #fff;
    font-weight: 700 !important;
    text-align: center;
}
.jumbo {
  margin-top: 20px;
}
.display-4 {
  color: #fff;
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}
.seo-header, .product-header, .intro-type .container h1.white, .company-heading 

.parallax {
    background-repeat: repeat;
    background-size: cover;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    z-index: -10;
 bb
}
.ct-btn-scroll {
    width: 49px;
    height: 49px;
    position: absolute;
    bottom: 25%;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 50px;
    z-index: 9;
    border-radius: 50%;
    -webkit-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
}
img, figure {
    max-width: 100%;
}

JavaScript

$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    } 
  });
});