Animated Scroll To Top Using jQuery

In this article, I am going to show you how to create Animated Scroll To Top Using jQuery, CSS, HTML. Scroll To Top is an important feature for a website. It helps to increase user experience. Probably you want to know that how scroll to top helps to increase user experience. Then my answer, when you will publish a big content in your website and users read this content and go bottom of the page. If this user wants to return to the top of this page then the user will do that by a single click. If you do not use the scroll to top button then users need to return top of the page by scrolling mouse. But this will be easier if you use the scroll to top button. Let's create a scroll to top button.

How To Create Scroll To Top?

We are going to create the scroll to top button using HTML, CSS, jQuery. It's very easy to create this for your website. We are going to create a working demo for this. Just follow these directions step by step.

Step-1 Create CSS

First, create a directory name as assets and create a stylesheet into this assets directory. We create a CSS file name as styles.css and write down this code bellow,


.cd-top {
display: inline-block;
overflow: hidden;
height: 30px;
width: 30px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, .05);
text-indent: 100%;
white-space: nowrap;
background: url(cd-top-arrow.svg) center 50% no-repeat #669;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
border-radius: 50%
.no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s
} {
visibility: visible;
opacity: 1
} {
opacity: .5

.no-touch .cd-top:hover {
background-color: #595986;
opacity: 1

@media only screen and (min-width:768px) {
.cd-top {
right: 20px;
bottom: 20px

@media only screen and (min-width:1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px
We use this stylesheet into our main file where we want to execute scroll to top button. Use have used a SVG image to visible scroll to top icon, we used cd-top-arrow.svg. So we need to include this image into assets directory. We already added into our demo version and this will be attached with this article. So now we are going to our next step.

Step-2 Create jQuery Event

Before this step, we have created necessary CSS for this project now we are going to create necessary jQuery animation event. Create a jQuery.js file into assets folder and write down this code bellow.


$(document).ready(function(e) {
var a = 300,
t = 1200,
l = 700,
s = e(".cd-top");
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass("cd-is-visible") : s.removeClass("cd-is-visible cd-fade-out"), e(this).scrollTop() > t && s.addClass("cd-fade-out")
}), s.on("click", function(a) {
a.preventDefault(), e("body,html").animate({
scrollTop: 0
}, l)
Our jQuery file is ready. This one will help us to make scroll to top with animation. Now we need to create our file which will display this scroll to top button. Let's go our next step.

Step-3 Create index.html File

Now we create an index.html file to execute this jQuery event. I am showing you the process how you use this but this scroll to the top will visible when you scroll down at least 300px from the top. So, you should create a long content to visible this. You can see it in our working demo but here is the process example.


<!DOCTYPE html>
<html lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Animated Scroll To Top Using jQuery - PHPAns</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=""; rel="stylesheet">
<link href="assets/styles.css" rel="stylesheet">
<script src=""></script>;
<script src="assets/jQuery.js"></script>
<div class="container">
<h1 class="text-center">Animated Scroll To Top Using jQuery</h1>
<h3 class="text-center">Scroll Down For See The Result</h3>
Some text , Some Text, Some Text
<h6 class="text-center">&copy; PHPAns 2016</h6>
<a href="#top" class="cd-top">Top</a>
We have added some our necessary styles and scripts in this file and we added external ajax library and font awesome CSS. WE used <a href="#top" class="cd-top">Top</a> this bottom of the page where body closed. So, you should be added this bottom of every page to get effective result. This project is fully ready to use you could use this. Scroll to the top button will visible only when your page scroll down at least 300px. If you try this code I hope this will display you a working result. I hope this article helps you to make your website more effective and helpful for your users. If you do not use this widget your website already, start using this from today. I'm highly recommended to use it.

I hope you understand this and you will use it on your website. If you want you can download attached file and modify this to see an instant example. If you have any question or comment about Animated Scroll To Top Using jQuery article please don't hesitate to do that, please comment your question in comment section.

Download Source Code
Unlock source code with a social share.

Did you like this article? it will be appreciated if you share a coffee or burger with the author

Sent $5 to the author
Sent $10 to the author

Need Assistance?

I'm Sajjad Hossain, working on web application development since 2012. Do you need assistance on your project? or are you stuck with problems? I am available to help you.
If you want to contact with me ping me at -


We use cookies on our website. To find out more about how and why they are used or opt-out, please read our Cookie Policy. By choosing "I Accept", you consent to our use of cookies. Cookie Policy