How to create dynamic and animated scroll to top with jQuery
In this tutorial I am going to show you how to add a scroll to top with dynamic window width when your reach 70% height it will show you an arrow and text “Back to Top”. We created this option with jQuery scroll event sent when your scroll position changes up and down, on a 70% scroll down it will fade arrow up box when you click on that arrow it take you to the top.
HTML used in this scroll page to show back to top.
<body id="top"> <div class="container"> <!-- Your Content goes Here --> <!-- Go to top button --> <p id="back-top"> <a href="#top"><span></span>Back to Top</a> </p> </div> </body>
Here you can add your content and it will show you Back to Top button when you reach 70% of the page width.
jQuery required to measure 70% page width:
var height = $( document ).height(); // returns height of HTML document var percent = 70; var scroll = (height/100)*percent;
On page ready it will calculate the height of document on page ready and calculate its 70% and assign to scroll. This is the main reason this scroll to top called dynamic every time we calculate actual window size and set the 70% height and pass to scroll function to show to top button.
Now rest of jQuery for other navigation:
$(document).ready(function(){
var height = $( document ).height(); // returns height of HTML document
var scroll = (height/100)*70;
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > scroll) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 700);
return false;
});
});
});This jQuery called every time when we scroll up or down browser window and calculate width and show Back to top button if you reaches 70%.
CSS we used to create this buttons style:
#back-top {
position: fixed;
bottom: 95px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(upArrow.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}All together
Here we create complete procedure with jQuery, CSS and HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery scroll to top animation | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
img {border-width: 0}
* {font-family:'Lucida Grande', sans-serif;}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
var height = $( document ).height(); // returns height of HTML document
var scroll = (height/100)*70;
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > scroll) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<style type="text/css">
#back-top {
position: fixed;
bottom: 95px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(upArrow.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>
</head>
<body id="top">
<h2>jQuery scroll to top animation Example. => <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<!-- Your Content goes Here -->
<!-- Go to top button -->
<p id="back-top">
<a href="#top"><span></span>Back to Top</a>
</p>
</body>
</html>Tutorial Categories:
Bux Bhai , SO Many Thanks, i got the keyword name (Dynamic Scroll top Jquey) Many Thanks for this tutorial. SO Many Thanks of Php Gang Team
I am glad it helped you 🙂
Pah JEE HEARTLY SO MANY THANKS> SHUKRIA< PLZ CARYY ON
I know many libraries can solve this. But i never look up the source code. With this example i get to know more a bout jquery scroll. Thank you
Try it on other browser.
Works on Firefox but only after all the adds have loaded, doesn’t work on Safari, works on edge, works on Opera