Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding a Scroll Down Anchor to your Website

Adding a scroll down anchor to your website makes it easier for users to navigate your website...

Adding a scroll down anchor button to your website makes it easier for users to navigate through your website without having to manually scroll. This tutorial provides you with the code you need to add an anchor button to your website and the JavaScript to enable scroll down functionality when the button is clicked.

Below is the HTML, CSS, and JavaScript required to add a scroll down anchor to your website.

Step 1 - Add the HTML below to your web page

<section class="company-heading intro-type" id="parallax-one">
  <div class="container">
    <div class="row product-title-info">
      <div class="col-md-12">
        <h1>DATA. DATA. DATA.</h1>
        <a class="ct-btn-scroll ct-js-btn-scroll" href="#section2"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
      </div>
    </div>
  </div>
  <div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/anchor/company-hero2.jpg);"></div>
</section>
<div class="main">
  <section id="section2">
    <div class="container jumbo">
      <div class="jumbotron">
        <h2>Let Big Data Change the Game</h2>
        <p>WebCorpCo is all about making sure your marketing stack is in alignment with your company as well as the customers you serve. There is no 'one size fits all' approach to marketing. Every business is unique, customers are unique, and your marketing should be as well.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
    </div>
  </section>
</div>

Step 2 - Add the CSS below to the main stylesheet of your website

.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: 50px;
}
.seo-header, .product-header, 
.intro-type .container h1.white, 
.company-heading h1 {
  font-weight: 100 !important;
  text-transform: capitalize;
  font-size: 55px;
  margin-bottom: 20px;
}
.parallax {
  background-attachment: inherit !important;
}
.parallax {
  background-attachment: inherit !important;
}
.parallax {
  background-attachment: inherit !important;
  background-repeat: repeat;
  background-size: cover;
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  z-index: -10;
}
.ct-btn-scroll {
  width: 49px;
  height: 49px;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 500px;
  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%;
}

Step 3 - Add the JavaScript below to a file named scroll-down.js

$(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;
      });
    } 
  });
});

Step 4 - Add the includes below to the pages where your anchor button lives

<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>
<script src="scroll-down.js"></script>

Download from Github

Share on Facebook Tweet It