Post
Ask Question

Smooth Scrolling Effect in JavaScript Using jQuery

Introduction

 
In this article, we will create a website with a Smooth Scrolling Effect. It is currently very popular. It is also called a Parallax Effect. In this article, we will not use a Parallax Effect but we try to mimic its functionality without using any plug-ins. It is very difficult to tell whether a website is using a parallax or Smooth Scrolling Effect. The origin of parallax lies in the scrolling speed only.
 

What the Parallax Effect?

 
According to Wikipedia parallax is defined in this way:
 
"Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines."
 
I'm not so good at physics but if we try to understand the meaning behind the words then it becomes easy to understand the above definition. First, it is a displacement and in my words displacement is related to some movement. So it's simply a movement. Now let's read the subsequent definition. Now it says that apart from the movement it can be the difference in the apparent position of an object that is viewed along each of two lines of sight.
 
The line of sight is just a line between your eye and the viewing object. A different line of sight means a different view of an object. And the definition also says something about angels. Okay, just a bit of physics is involved there. For our website, we need to remember the only movement and forget about other words. We want our website to look beautiful not the definition.    
 

What the Scrolling Effect?

 
As the name says, it is the effect associated with the scrolling of the page or element. In this effect we alter the amount, speed, location and other properties of the element. This effect is currently very predominant. In this article, we will create a simple website based on this effect only and without using any external plug-ins.
 

How does the Parallax Effect work?

 
In the Parallax Effect, we have various layers of various sizes or you can say a div. These divs move with page scrolling or in accordance with the user mouse movement. The motion of layers and speed is entirely dependant on their size. The layer having the larger size moves much faster compared to the smaller one and seems to be closer. The smaller layers move slowly and to the user, it appears further than the others. But the fact is that all are at the same distance but their angle and movement separate them.
 

How does the Scrolling Effect work?

 
The Scrolling Effect is not as technical as the Parallax Effect. The scrolling comes in the picture when either one uses one's mouse wheel to scroll a page or uses the scroll bars. Now in the case of without the Scrolling Effect the page is simply scrolled but the magic happens when you have this effect attached to the page. This effect can change the speed of page scrolling or numbers of pixels to scroll.
 
That change is introduced gradually within a certain time in effect that makes the scrolling look smooth. When you see something that becomes visible when you scroll the page or a header is changed or top buttons start floating, in all these cases the Scrolling Effect is doing the magic at the backhand. (No server-side here. I mean only JavaScript.)
 
Creating a Scrolling Effect based website 
 
Before we start building it we need to prepare a workspace for us. Preparing a workspace is very simple. Create a new text file with a name of your choice. Now paste the following code into it.
  1. <html>  
  2. <head>  
  3.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css"rel="stylesheet" type="text/css" />  
  4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>  
  6.     <meta charset="utf-8" />  
  7.     <title>Overlay by Arpit</title>  
  8.       <style>  
  9.         /* we will use this section for adding css classes or any styling */  
  10.     </style>  
  11.  </head>  
  12. <body>  
  13.        <!-- HTML will go here -->  
  14.       <script>  
  15.           $(document).ready(function () {  
  16.               // We will use this for adding our jQuery or scripts  
  17.           });  
  18.     </script>  
  19. </body>  
  20. </html> 
Now save your text file and ensure its extension is "html".
 
Writing the HTML
 
Let us start the journey of creating a scroll effect. For the sake of demonstration and for simplicity purposes I have done my best to write a minimal amount of code covering most of the cases. You can extend it as per your needs. Let us understand the HTML required for a page step-by-step.
  1. We need to provide the functionality to the user to scroll to the top at any time because our site will be too deep. For that, we need to add a button or image on which, when one clicks, one reaches the top of the document. The element for this is div with an ID "goto-top". Now to make it more user-friendly let us add an image in it using an image tag.
     
    Sample code
    1. <div id="goto-top">   
    2.       <imgsrc='some_image_path_here'height=80width=80/>  
    3. </div> 
  2. Now we need to create the sections of the page. They are the same as the parts of your story. As you flip the page of the book, the user will also do that. For that, we need to create pages or sections. The div element is best suited for it. Create a div and give it an ID of "block 1". We don't want the pages of our book to be blank and user too so let's add some content to the page. 
     
    In my article I'm treating a page and section as the same because it's going to be a single page website divided in multiple sections. For content I'm adding the iframes that are referring to my other articles. You can read them too. Sample code:
    1. <div id="block1">  
    2. <center>  
    3. <iframeborder="0"src="http://www.c-sharpcorner.com/UploadFile/4aac15/creating-common-twitter-button-for-entire-website-using-java/"width=50%height=800></iframe>  
    4. </center>  
    5. </div> 
  3. Let us repeat Step 3 three more times so that we have 4 sections in our page. Each containing some content. 
     
  4. Now the book is made and ready to sell! But what about the index? We need to add the index section to our page so that the user can choose which chapter to read.
     
  5. For the menu create a div with the id mn and the class menu. This will create an empty book page and now we need to print the index on that page. For printing the index goes to step 6.
     
  6. Add the div element with the id b1. It will contain the chapter name. To add the styling just add one more div in it and give it an id of cc. Now close all the divs.
     
  7. Repeat Step 6 three more times for adding the index of each page. The sample code for Steps 5, 6 and 7 is:
    1. <divid="mn"class="menu">  
    2.     <divid="b1"onclick="scroll('#block1');"><divclass='cc'>Article 1</div></div>  
    3.     <divid="b2"onclick="scroll('#block2');"><divclass='cc'>Article 2</div></div>  
    4.     <divid="b3"onclick="scroll('#block3');"><divclass='cc'>Article 3</div></div>  
    5.     <divid="b4"onclick="scroll('#block4');"><divclass='cc'>Article 4</div></div>  
    6. </div> 
  8. Close every unclosed tag and save your file. All HTML is completed now.
Writing the CSS
 
It's time to decorate our book. A good cover is very important for good sales of any book. The same is also true for any website. No matter how much effect you add to your site, without a good design no one will look at it. So let's start designing the CSS.
  1. First of all, let us restrict the size of our page body. Set the height to 900px and width to 100%. And hide the scrollbars by setting overflow to hidden.
    1. body{    
    2.   width:100%;    
    3.   height:900px;    
    4.   overflow:hidden;    
    5. }   
  2. Set the properties of the goto-top element. The position is fixed and the display is none. We will change the display from JavaScript.
    1. #goto-top{  
    2.   position:fixed;  
    3.   left:85%;  
    4.   top:90%;  
    5.   width:50px;  
    6.   height:50px;  
    7. display:none;  
    8. } 
  3. Now design the sections of your page. You can set the width to 100% and height to 900 px for the current example.
    1. #block1{  
    2.  width:100%;  
    3.   height:900px;  
    4.   background-color:rgba(1,220,3,0.4);  
    5.   border:1pxsolidblack;  
    6. } 
  4. Add a design for the menu as well. The menu has the "menu" class. We also create one more class for our menu for future use.
    1. .menu{  
    2.   position:fixed;  
    3.   top:0px;  
    4.   left:0px;  
    5.   width:100%;  
    6.   height:105px;  
    7.   background:black;  
    8. }  
    9. .menu1{  
    10.   position:fixed;  
    11.   top:0px;  
    12.   left:0px;  
    13.   width:100%;  
    14.   height:120px;;  
    15.   background:white;  
    16. } 
  5. Now design the buttons of the menu. The buttons have the ids b1, b2, b3, and b4.
    1. #b1{  
    2.   position:fixed;  
    3.   left:0%;  
    4.   width:auto;  
    5.   height:100px;  
    6.   border-radius:50%;  
    7.   margin:3px;  
    8.   background:rgba(145,199,11,0.5);  
    9. } 
  6. Now just add some decoration on your text by setting some properties for the "cc" class.
    1. .cc{  
    2.   margin:35px15px15px15px;  
    3.   font-size:22px;  
    4. }   
Writing the JavaScript
 
Finally, its time to transform our dream castle into reality. The JavaScript is quite easy if you are familiar with syntaxes. I'll be using jQuery for writing JavaScript. So let's start.
  1. We need our web page to be ready before we do things else. For that, we will add everything to the ready function of the document.
     
  2. It's a scroll effect so we must detect the scroll effect. For that just bind the scroll handler to the document.
    1. $(document).scroll(function (evt){});  
  3. Now in the handler code what we need to do first is to change our header when the page scrolls. For that, we are changing the class of the menu from the menu to menu1. To do this we are using the add class method that simply adds the new class on the menu and sets the duration of the add class effect to 1000ms.
    1. $("#mn").addClass("menu1", 1000);  
  4. We also need to make the goto-top button visible when the user scrolls the page. For that, we are using the fadeIn function on that element.
    1. $("#goto-top").fadeIn(1000);  
  5. Steps 4 and 5 are covered in an if statement because it occurs only if the page is scrolled a certain amount. To detect the amount of scrolling we are using the scrollTop() function that gives the amount scrolled by the user.
     
  6. In the else case we are setting everything back to original. The Remove Class is used for removing the class from the element and fade-out is used for hiding the element. 
    1. if ($(this).scrollTop() > 20) {  
    2.     $("#goto-top").fadeIn(1000);  
    3.     $("#mn").addClass("menu1", 1000);  
    4. }  
    5. else {  
    6.     $("#goto-top").fadeOut(500);  
    7.     $("#mn").removeClass("menu1", 1000);  
    8. } 
  7. The next piece of code is for handling the click on the top or home button.
     
  8. We are animating the scroll by using the animate method. scrollTop zero is simply for the top of the document.
     
  9. We are also animating the body color to make it more attractive when scrolling.
    1. if ($(document).scrollTop() > 20) {  
    2.     $('body').animate({ scrollTop: 0, "background-color":"black" }, 1500, function () {  
    3.         $('body').animate({"background-color":"white" }, 500);  
    4.     });  
    5. }   
  10. In the next function, we are handling the click of our index or menu items.
     
  11. In this function, we are taking the top position of the passed element and then setting the scroll amount equal to it.
    1. function scroll(name) {  
    2.     $('body').animate({ scrollTop: $(name).offset().top, "background-color":"black" }, 1500, function () {  
    3.         $('body').animate({"background-color":"white" }, 500);  
    4.     });  
    5. }   
That's it; all done. We created our site. The complete code is given below. Feel free to copy it but don't forget to share and mention the author.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>  
  7.     <meta charset="utf-8" />  
  8.     <title>Scrolling site</title>  
  9.     <style>  
  10.         body {  
  11.             width: 100%;  
  12.             height: 900px;  
  13.             overflow: hidden;  
  14.         }  
  15.    
  16.         iframe {  
  17.             margin-top: 90px;  
  18.         }  
  19.   
  20.         #goto-top {  
  21.             position: fixed;  
  22.             left: 85%;  
  23.             top: 90%;  
  24.             width: 50px;  
  25.             height: 50px;  
  26.             display: none;  
  27.         }  
  28.   
  29.         #block1 {  
  30.             width: 100%;  
  31.             height: 900px;  
  32.             background-color: rgba(1,220,3,0.4);  
  33.             border: 1px solid black;  
  34.         }  
  35.   
  36.         #block2 {  
  37.             width: 100%;  
  38.             height: 900px;  
  39.             background-color: rgba(41,220,130,0.4);  
  40.             border: 1px solid black;  
  41.         }  
  42.   
  43.         #block3 {  
  44.             width: 100%;  
  45.             height: 900px;  
  46.             background-color: rgba(1,220,123,0.4);  
  47.             border: 1px solid black;  
  48.         }  
  49.   
  50.         #block4 {  
  51.             width: 100%;  
  52.             height: 900px;  
  53.             background-color: rgba(1,220,3,0.4);  
  54.             border: 1px solid black;  
  55.         }  
  56.    
  57.         .menu {  
  58.             position: fixed;  
  59.             top: 0px;  
  60.             left: 0px;  
  61.             width: 100%;  
  62.             height: 105px;  
  63.             background: black;  
  64.         }  
  65.    
  66.         .menu1 {  
  67.             position: fixed;  
  68.             top: 0px;  
  69.             left: 0px;  
  70.             width: 100%;  
  71.             height: 120px;  
  72.             ;  
  73.             background: white;  
  74.         }  
  75.   
  76.         #b1 {  
  77.             position: fixed;  
  78.             left: 0%;  
  79.             width: auto;  
  80.             height: 100px;  
  81.             border-radius: 50%;  
  82.             margin: 3px;  
  83.             background: rgba(145,199,11,0.5);  
  84.         }  
  85.    
  86.         .cc {  
  87.             margin: 35px 15px 15px 15px;  
  88.             font-size: 22px;  
  89.         }  
  90.   
  91.         #b2 {  
  92.             position: fixed;  
  93.             left: 25%;  
  94.             width: auto;  
  95.             height: 100px;  
  96.             border-radius: 50%;  
  97.             margin: 3px;  
  98.             background: rgba(145,199,11,0.5);  
  99.         }  
  100.   
  101.         #b3 {  
  102.             position: fixed;  
  103.             left: 50%;  
  104.             width: auto;  
  105.             height: 100px;  
  106.             border-radius: 50%;  
  107.             margin: 3px;  
  108.             background: rgba(145,199,11,0.5);  
  109.         }  
  110.   
  111.         #b4 {  
  112.             position: fixed;  
  113.             left: 75%;  
  114.             width: auto;  
  115.             height: 100px;  
  116.             border-radius: 50%;  
  117.             margin: 3px;  
  118.             background: rgba(145,199,11,0.5);  
  119.         }  
  120.     </style>  
  121. </head>  
  122. <body>  
  123.     <div id="goto-top">  
  124.         <img src='Your_image_path' height="80" width="80" />  
  125.     </div>  
  126.     <div id="block1">  
  127.         <center><iframe border="0" src="http://www.c-sharpcorner.com/UploadFile/4aac15/creating-common-twitter-button-for-entire-website-using-java/" width=50% height=800></iframe></center>  
  128.     </div>  
  129.     <div id="block2">  
  130.         <center><iframe border="0" src="http://www.c-sharpcorner.com/UploadFile/4aac15/difference-between-bindlivedelegatetrigger-in-jqu/" width=50% height=800></iframe></center>  
  131.     </div>  
  132.     <div id="block3">  
  133.         <center><iframe border="0" src="http://www.c-sharpcorner.com/UploadFile/4aac15/creating-a-basic-overlay-effect-in-jquery/" width=50% height=800></iframe></center>  
  134.     </div>  
  135.     <div id="block4">  
  136.         <center><iframe border="0" src="http://www.c-sharpcorner.com/UploadFile/4aac15/building-accordion-with-css3-without-using-any-jquery-or-js/" width=50% height=800></iframe></center>  
  137.     </div>  
  138.     <div id="mn" class="menu">  
  139.         <div id="b1" onclick="scroll('#block1');">  
  140.             <div class='cc'>Article 1</div>  
  141.         </div>  
  142.         <div id="b2" onclick="scroll('#block2');">  
  143.             <div class='cc'>Article 2</div>  
  144.         </div>  
  145.         <div id="b3" onclick="scroll('#block3');">  
  146.             <div class='cc'>Article 3</div>  
  147.         </div>  
  148.         <div id="b4" onclick="scroll('#block4');">  
  149.             <div class='cc'>Article 4</div>  
  150.         </div>  
  151.     </div>  
  152.     <script>  
  153.         $(document).ready(function () {  
  154.             $(document).scroll(function (evt) {  
  155.                 if ($(this).scrollTop() > 20) {  
  156.                     $("#goto-top").fadeIn(1000);  
  157.                     $("#mn").addClass("menu1", 1000);  
  158.                 }  
  159.                 else {  
  160.                     $("#goto-top").fadeOut(500);  
  161.                     $("#mn").removeClass("menu1", 1000);  
  162.                 }  
  163.             });  
  164.             $("#goto-top").click(function (evt) {  
  165.                 if ($(document).scrollTop() > 20) {  
  166.                     $('body').animate({ scrollTop: 0, "background-color": "black" }, 1500, function () {  
  167.                         $('body').animate({ "background-color": "white" }, 500);  
  168.                     });  
  169.                 }  
  170.                 else {  
  171.                     evt.preventDefault();  
  172.                 }  
  173.             });  
  174.         });  
  175.    
  176.         function scroll(name) {  
  177.             $('body').animate({ scrollTop: $(name).offset().top, "background-color": "black" }, 1500, function () {  
  178.                 $('body').animate({ "background-color": "white" }, 500);  
  179.             });  
  180.    
  181.         }  
  182. </script>  
  183. </body>  
  184. </html> 
a10p1.JPG
 
a10p2.JPG
 
a10p3.JPG
 

Summary

 
So that is all for this article. But it's just a beginning for your site. Show your creativity in your web site and don't forget to share the link in the comments. If you like the article then you can share it and if you need any explanation then the comment box is waiting for you. Don't forget to check the Live Output and downloading the sample files.  LIVE OUTPUT


Similar Articles