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,
styles.css
.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%
}
.cd-top.cd-fade-out,
.cd-top.cd-is-visible,
.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
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1
}
.cd-top.cd-fade-out {
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
}
}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.
jQuery.js
$(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)
})
})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.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; rel="stylesheet">
<link href="assets/styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>;
<script src="assets/jQuery.js"></script>
</head>
<body>
<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>
<p>
Some text , Some Text, Some Text
</p>
</div>
<h6 class="text-center">© PHPAns 2016</h6>
<a href="#top" class="cd-top">Top</a>
</body>
</html>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.
