32,000+ SUBSCRIBERS CAN'T GO WRONG !!!

phpans
GET TOP ARTICLES, SNIPPETS, SCRIPTS IN YOUR INBOX FOR FREE!

Delivered by GET EMAIL UPDATES FeedBurner
We always respect your privacy and take protecting it seriously.
We won't Spam You

Animated Scroll To Top Using jQuery

, 0,
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,

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

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.

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

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 index.html file to execute this jQuery event. I am showing you the process how you use this but this scroll to top will visible when you scroll down at least 300px from top. So, you should create a long content to visble 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">&copy; PHPAns 2016</h6>
<a href="#top" class="cd-top">Top</a>
</body>
</html>

We have added some our necessery 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 added this bottom of every page to get effective result. This project is fully ready to use you could use this. Scroll to top button will visible only when your page scroll down at least 300px. If you try this code I hope this will be 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 recommanded 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 PDF
Is this article helpful for you?





captcha

  • Connect
  •       
Top
Create an free account and start learning & sharing! Sign Up