How to Add an Animated Scroll Down Anchor

Contemporary web design is all about providing a simplified and direct user experience. For many websites, this means having clear actions that you expect users to undertake. One such action is the arrow that indicates a user should scroll down to continue reading. This type of UI elements is typically associated with large hero or sectional containers that are often full-width and full-height. The arrow indicates to the user that more content lies below the fold and that, by clicking on the anchor link, they will be taken to next appropriate section.

Animation, on the other hand, is used to capture a user’s attention and creates a point of reference that denotes importance. CSS animations can be used to attract a user’s eye and make clear where there next behavior should lead.

Using Animate.css, you can create a number of effects that are both visually appeasing and consistent within the world of UX/UI design. In conjunction with an suitable anchor arrow, an animated class can immediately convey to a user that their next point of action should be clicking this specific object. This helps designers and developers better control the user flow and make sure important content is appropriately shown to a given user.

In this tutorial, we will teach you how to add an animated scroll down anchor that utilizes the “bouncy” animation class. Using JavaScript, we attached a 5-second interval to the animation that continues infinitely.

Below is the HTML, CSS, and JavaScript required.

Step 1 — animated-scroll-anchor.html

Copy and paste the following code into animated-scroll-anchor.html

<section class="image-hero">
  <div class="image-center image-hero-content white">
    <div class="container">
      <h1 class="white">Big Data.<br />Realtime Insight.</h1>
      <p class="white">Leverage your data and improve marketing and sales ROI. WebCorpCo is at the forefront of digital marketing, content management, automated marketing, and more.</p>
    </div>  
  </div>
  <a class="ct-btn-scroll ct-js-btn-scroll animated" href="#scrollDown"></a>
</section>
<section id="scrollDown">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="ct-content ct-sectional-content">
          <div class="inner text-center">
            <h2 class="ct-section-header">
              How It Works
            </h2>
                        <h3>Learn How to Add a Bouncy Scroll Down Anchor</h3>
                        <p>The main components of a bouncy scroll down anchor are made by possible by Animate.css in conjunction with some basic JavaScript. Animate.css is used to provide the foundation of the animation, where as JavaScript is used to both control the interval of the animation as well as create the scrolling anchor functionality.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Step 2 — animated-scroll-anchor.css

Download the CSS below and include it in your web page

animated-scroll-anchor.css

Step 3 — animated-scroll-anchor.js

Copy and paste the code below into animated-scroll-anchor.js

$(document).ready(function(){
  $(".ct-btn-scroll").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;
      });
    } 
  });
    
  setInterval(function(){
    $('.ct-btn-scroll').toggleClass("bounce");
  }, 5000);    
    
});

Step 4 — Add the following includes to your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="animated-scroll-anchor.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="animated-scroll-anchor.js"></script>

In this tutorial we showed how to add a bouncy animation to a scroll down anchor. This will help you better control the intended user flow of your web pages and make sure your vital content is prevented to users at the right time.

Demo on JSFiddle

Download from GitHub

Originally posted on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.