Scrolling to a div on click

This tutorial will show you a simple Jquery effect of scrolling. You may have found links at the bottom of some websites, that scroll to a particular section of the website on click. Isn't it quite interesting ? After reading this article you will stop wondering next time you see this jquery effect on any other websites, because you will own that concept right after the end of this tutorial. Now you will start building it.

In this tutorial I will only give the basic idea of creating this on click scroll effect. You need to experiment a little bit to apply this effect finally on your website.

An overview of the example

Here in this tutorial I am using four divs viz blue, red, yellow and green and at the bottom of those divs I have inserted three links. The jquery function will be applied to these three link buttons, which will lead to a particular div on click. You can choose as many divs as you want. For sake of simplicity I am using only four divs.You can check the Demo below

Demo

HTML markup used

The following HTML markup has been used in this tutorial. At first we are forming the four divs viz blue, red, yellow and green, after that the button links have been created.

<body>
  <h2>Scroll to a Div</h2>
  <!--FOUR DIVS HTML-->
  <div id="blue">Blue</div>
  <div id="red">Red</div>
<div id="yellow">Yellow</div>
<div id="green">Green</div>
    <!--BUTTON HTML-->
  <div class="centerit">
  <button id="bluebt">Go Blue</button>
  <button id="redbt">Go Red</button>
  <button id="yellowbt">Go Yellow</button>
  </div>
</body>

The CSS to style the divs and the links

The stylesheet that is being used in this tutorial is given below.

/*******HEADING CSS********/
h2 {
  font-size: 60px;
  text-align: center;
  font-family: Segoe UI;
  color: #6E6E6E;
  }

/*******FOUR DIVS CSS********/
#blue, #red, #yellow, #green {
  margin: 20px auto;
  width: 600px;
  height: 400px;
  border-radius: 10px;
  font-size: 40px;
  text-align: center;
  line-height: 400px;
  font-family: Segoe UI;
  color: #ffffff
}

#blue {
  background-color: #0000FF;
}
#red {
  margin-top: 60px; 
  background-color: #FF0000;
}
#yellow {
  margin-top: 80px;
  background-color: #FFFF00;
}
#green {
  margin-top: 80px; 
  background-color: #088A08;
}

.centerit {
  margin: 20px auto;
  width: 290px;
  height: 100px;

}

/*******BUTTON CSS********/
button {
  padding: 15px;
  border-style: none;
  font-size: 16px;
  transition: background 0.3s ease-in-out;
}

button:hover {
  background-color:#A4A4A4;
}
button:focus {outline: none;}

This is a simple style sheet and quite understable. You are supposed to be understand this section.

The JQuery for this scroll effect

Following is the JQuery part, I will describe it below

$(document).ready(function(){
  //SCROLL TO THE BLUE DIV
    $("#bluebt").click(function(){
    $('html, body').animate(
      {scrollTop: $('#blue').offset().top},500);
    });
  
  //SCROLL TO THE RED DIV
  $("#redbt").click(function(){
    $('html, body').animate(
      {scrollTop: $('#red').offset().top},500);
    });
  
  //SCROLL TO THE YELLOW DIV
  $("#yellowbt").click(function(){
    $('html, body').animate(
      {scrollTop: $('#yellow').offset().top},500);
    });
  });

You might have seen in the above JQuery that it has included three click function of the same type, only the div id and button id changes. So for the sake of simplicity I will describe only the first click function of the above JQuery, you will follow the rest yourself.

$("#bluebt").click(function(){
    $('html, body').animate(
      {scrollTop: $('#blue').offset().top},500);
    });

In the first line we are assigning a click event and a function to the button that has an ID #bluebt and in the next line we are defining the function. Within the function we have declared an .animate() effect. In the third line we have assigned a property and duration to the .animate() effect. We have defined scrollTop as the property giving it a value equal to the #blue div's offset from the top. So that it will bring the scroll to the top of the div with the ID #blue.

Codeflaps