Smooth Scrolling Effect in JavaScript Using jQuery

Arpit Jain
Aug 12, 2013
23.8k
0
1
Article

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 is

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 its simply a movement. Now let's read the subsequent definition. Now it says that apart from movement it can be the difference in 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. Different line of sight means 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 only movement and forget about other words. We want our website to look beautiful not the definition.

What the Scrolling Effect is

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 the Parallax Effect works

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 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 the Scrolling Effect works

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 back hand. (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.

<html>

<head>

<title>Overlay by Arpit</title>

<style>

/* we will use this section for adding css classes or any styling */

</style>

</head>

<body>

$(document).ready(function () {

// We will use this for adding our jQuery or scripts

});

</script>

</body>

</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.

We need to provide a 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

<divid="goto-top">

<imgsrc='some_image_path_here'height=80width=80/>

</div>
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 the 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:

<divid="block1">

<center>

<iframeborder="0"src="http://www.c-sharpcorner.com/UploadFile/4aac15/creating-common-twitter-button-for-entire-website-using-java/"width=50%height=800></iframe>

</center>

</div>
Let us repeat Step 3 three more times so that we have 4 sections in our page. Each containing some content.
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.
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 go to step 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.
Repeat Step 6 three more times for adding the index of each page. The sample code for Steps 5, 6 and 7 is:

<divid="mn"class="menu">

    <divid="b1"onclick="scroll('#block1');"><divclass='cc'>Article 1</div></div>

    <divid="b2"onclick="scroll('#block2');"><divclass='cc'>Article 2</div></div>

    <divid="b3"onclick="scroll('#block3');"><divclass='cc'>Article 3</div></div>

    <divid="b4"onclick="scroll('#block4');"><divclass='cc'>Article 4</div></div>

</div>
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.

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.

body{

width:100%;

height:900px;

overflow:hidden;
}
Set the properties of the goto-top element. The position is fixed and display is none. We will change the display from JavaScript.

#goto-top{

position:fixed;

left:85%;

top:90%;

width:50px;

height:50px;

display:none;

}
Now design the sections of your page. You can set the width to 100% and height to 900 px for the current example.

#block1{

width:100%;

height:900px;

background-color:rgba(1,220,3,0.4);

border:1pxsolidblack;

}
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.

.menu{

position:fixed;

top:0px;

left:0px;

width:100%;

height:105px;

background:black;

}

.menu1{

position:fixed;

top:0px;

left:0px;

width:100%;

height:120px;;

background:white;

}
Now design the buttons of the menu. The buttons have the ids b1, b2, b3 and b4.

#b1{

position:fixed;

left:0%;

width:auto;

height:100px;

border-radius:50%;

margin:3px;

background:rgba(145,199,11,0.5);

}
Now just add some decoration on your text by setting some properties for the "cc" class.

.cc{

margin:35px15px15px15px;

font-size:22px;

}

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 the JavaScript. So let's start.

We need our web page to be ready before we do thing else. For that we will add everything to the ready function of the document.
It's a scroll effect so we must detect the scroll effect. For that just bind the scroll handler to the document.

$(document).scroll(function (evt){});
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 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.

$("#mn").addClass("menu1", 1000);
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.

$("#goto-top").fadeIn(1000);
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.
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.

     if ($(this).scrollTop() > 20) {

         $("#goto-top").fadeIn(1000);

         $("#mn").addClass("menu1", 1000);

     }

    else {

         $("#goto-top").fadeOut(500);

         $("#mn").removeClass("menu1", 1000);

     }
The next piece of code is for handling the click on top or home button.
We are animating the scroll by using the animate method. scrollTop zero is simply for the top of the document.
We are also animating the body color to make it more attractive when scrolling.

     if ($(document).scrollTop() > 20) {

         $('body').animate({ scrollTop: 0, "background-color":"black" }, 1500, function () {

             $('body').animate({"background-color":"white" }, 500);

         });

     }
In the next function we are handling the click of our index or menu items.
In this function we are taking the top position of the passed element and then setting the scroll amount equal to it.

function scroll(name) {

    $('body').animate({ scrollTop: $(name).offset().top, "background-color":"black" }, 1500, function () {

        $('body').animate({"background-color":"white" }, 500);

    });

}

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.

<!DOCTYPE html>

<html>

<head>

<title>Scrolling site</title>

<style>

body {

width: 100%;

height: 900px;

overflow: hidden;

}

iframe {

margin-top: 90px;

}

#goto-top {

position: fixed;

left: 85%;

top: 90%;

width: 50px;

height: 50px;

display: none;

}

#block1 {

width: 100%;

height: 900px;

background-color: rgba(1,220,3,0.4);

border: 1px solid black;

}

#block2 {

width: 100%;

height: 900px;

background-color: rgba(41,220,130,0.4);

border: 1px solid black;

}

#block3 {

width: 100%;

height: 900px;

background-color: rgba(1,220,123,0.4);

border: 1px solid black;

}

#block4 {

width: 100%;

height: 900px;

background-color: rgba(1,220,3,0.4);

border: 1px solid black;

}

.menu {

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 105px;

background: black;

}

.menu1 {

position: fixed;

top: 0px;

left: 0px;

width: 100%;

height: 120px;

;

background: white;

}

#b1 {

position: fixed;

left: 0%;

width: auto;

height: 100px;

border-radius: 50%;

margin: 3px;

background: rgba(145,199,11,0.5);

}

.cc {

margin: 35px 15px 15px 15px;

font-size: 22px;

}

#b2 {

position: fixed;

left: 25%;

width: auto;

height: 100px;

border-radius: 50%;

margin: 3px;

background: rgba(145,199,11,0.5);

}

#b3 {

position: fixed;

left: 50%;

width: auto;

height: 100px;

border-radius: 50%;

margin: 3px;

background: rgba(145,199,11,0.5);

}

#b4 {

position: fixed;

left: 75%;

width: auto;

height: 100px;

border-radius: 50%;

margin: 3px;

background: rgba(145,199,11,0.5);

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

<div class='cc'>Article 1</div>

</div>

<div class='cc'>Article 2</div>

</div>

<div class='cc'>Article 3</div>

</div>

<div class='cc'>Article 4</div>

</div>

$(document).ready(function () {

$(document).scroll(function (evt) {

if ($(this).scrollTop() > 20) {

$("#goto-top").fadeIn(1000);

$("#mn").addClass("menu1", 1000);

}

else {

$("#goto-top").fadeOut(500);

$("#mn").removeClass("menu1", 1000);

}

});

$("#goto-top").click(function (evt) {

if ($(document).scrollTop() > 20) {

$('body').animate({ scrollTop: 0, "background-color": "black" }, 1500, function () {

$('body').animate({ "background-color": "white" }, 500);

});

}

else {

evt.preventDefault();

}

});

function scroll(name) {

$('body').animate({ scrollTop: $(name).offset().top, "background-color": "black" }, 1500, function () {

$('body').animate({ "background-color": "white" }, 500);

});

}

</script>

</body>

</html>

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 comment box is waiting for you. Don't forget to check the Live Output and downloading the sample files. LIVE OUTPUT