Jquery animation scroll with anchors

Source

What Will I Learn?

• You will learn how to create anchors on your site.
• Create scroll animation to jump sections when you click a link on your site.

Requirements

• Basic knowledge about HTML.
• Basic knowledge about CSS.
• Basic knowledge about JavaScript.
• You have to install / host the jQuery file or you can add jQuery CDN if you don't want to install or host it.
• To try out the code in this tutorial you will need a code editor and browser.

Difficulty

• Basic

Tutorial Contents

With this tutorial you will learn how to do an animation with the scroll down with anchors. This is interesting when we have on the sites links between sections where we want the user to click on the link and jump to the desired section but with a slow scroll animation.

Let's start by creating an index.html file and inserting the base HTML code to make a small example to use the scroll animation between sections.

1. Open your code editor
2. Create a new file and save as index.html
3. Add html base code

< html>
  < head>
    < title>Scroll Animation< /title>
  < /head>
  < body>
  < /body>
< /html>

Now let's start creating the anchors. This will be to identify where the link will be so we can jump to the section that we want the user to go to.

• The class="link-scroll"will be our link element to detect the click and start scrolling. href="#section-footer" will be the identifier of our section that we will scroll.
• The element id="section-footer" will be our section to which the scroll will be forwarded.

   < a class="link-scroll" href="#section-footer">HEADER< /a>
    < p id="section-footer">SECTION FOOTER< /p>

Let's put our anchors in our html code base.

< html>
  < head>
    < title>Scroll Animation< /title>
  < /head>
  < body>
< header>
    < a class="link-scroll" href="#section-footer">HEADER< /a>
  < /header>
 < footer>
    < p id="section-footer">SECTION FOOTER< /p>
  < /footer>
  < /body>
< /html>

To use jQuery, we need to install or host it. We can also add jQuery CDN. For more details you can visit an official jquery website. In this tutorial, I use Google's CDN. Add the CDN in the < head> element.

< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>

Let's include in our sample code to see how the structure looks.

< html>
  < head>
    < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
    < title>Scroll Animation< /title>
  < /head>
  < body>
< header>
    < a class="link-scroll" href="#section-footer">HEADER< /a>
  < /header>
 < footer>
    < p id="section-footer">SECTION FOOTER< /p>
  < /footer>
  < /body>
< /html>

After we have our complete HTML structure we are going to put the code to make the slow scrolling animation effect jump to the section we want when we click on a link.
The script will be included at the end of our in order to detect the element that is in our html to make the animation effect.
I put a time of 1000 to be a little slow but if we want to put faster we can put the shortest time with a lower value.

< script>
$('.link-scroll').on("click", function(ev){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
});
< /script>

Now I'm going to show the structure of the html with the stylization so that you can see the example working in your pageindex.html.

< html>
  < head>
    < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
< style>
      header {
       top: 0px;
       background-color:#000;
       height: 50px;
       color:#fff;
       text-align:center;
      }
    . exampleDiv1, . exampleDiv2, . exampleDiv3{
      background-color: #fff;
      text-align:center;
      padding: 250px 0px 250px 0px;
    }
    . exampleDiv2{
      background-color: #000;
      color:#fff;
    }
    footer {
      height: 50px;
      background-color:#000;
      color:#fff;
      text-align:center;
    }
   < /style>
    < title>Scroll Animation< /title>
  < /head>
  < body>
< header>
      < a class="link-scroll" href="#section-footer">HEADER< /a>
  < /header>
     < div class="exampleDiv1">DIV 1< /div>
     < div class="exampleDiv2">DIV 2< /div>
     < div class="exampleDiv3">DIV 3< /div>
 < footer>
      < p id="section-footer">SECTION FOOTER< /p>
  < /footer>
< script>
   $ ('.link-scroll').on("click", function(ev){
       $ ('html, body').animate({
           scrollTop: $ ( $(this).attr('href') ).offset().top}, 1000);
     });
< /script>
  < /body>
< /html>

Here you can see the code of this tutorial working. LIVE DEMO (click where it says header to see the scroll function)

Curriculum

• Tutorial:How to add breadcrumb in wordpress
• Tutorial: How to create a data table with filters and Import & Export data table (Wordpress)
• Tutorial: How to use Lazy Load in Wordpress
• Tutorial: How to use EU Cookie Law (Wordpress)
• Tutorial: How to use tawk.to in wordpress
• Tutorial: Wordpress: Album and Image Gallery Plus Lightbox
• Tutorial: Wordpress: WP Multilang
• Tutorial: How to use disabe comments plugin
• Tutorial: How to use duplicate pages plugin (Wordpress)

---

Posted on Utopian.io - Rewarding Open Source Contributors

---