Tutorial – Add Diwali Rocket “Scroll to Top” Button to Your Website

Deepavali or Diwali celebrated across the India is a festival of lights, people use to burn the fire crackers, and rockets are put to fire to light up the sky. Why not we use virtual fire crackers to stop the air pollution and celebrate greener Deepavali this time?

Also read:

• Multi Device Website Mockup Generator – Create Website Mockup for Apple Devices
• How to Create PHP AJAX Contact Form with Google reCaptcha

How to Use Virtual Fire Cracker on your Website?

So are you thinking how to use virtual fire cracker on your website? Here we have come up with the “Diwali Rocket Scroll to Top” HTML/jQuery code that adds a “Rocket” cracker at the bottom of your webpage. The “scroll to top rocket” only appears after scrolling 50% of your page. Clicking on the rocket scrolls the page to top with smooth animation. Here is how it looks.

How to Add Deepavali “Rocket Scroll to Top” Button to Your Webpage

1. Open your webpage with any code editor such as Notepad++ or Atom
2. Add the following HTML code within the body tag
[html] <a class="scrollup">Scroll</a>
[/html]
3. Include the following CSS in your stylesheet
[css] .scrollup {
background: url("images/back-to-top.png") no-repeat scroll 0 0 transparent;
position: fixed;
cursor: pointer;
bottom: 20px;
display: none;
height: 110px;
width: 40px;
right: 20px;
text-indent: -9999px;
}
[/css]
4. Download and paste the “back-to-top.png” inside “images” folder (available in source code)
5. Include the jQuery library in the header section (ignore if already included)
[html] <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
[/html]
6. Now add the following jQuery script just before the closing body tag
[java] <script type="text/javascript">

$(document).ready(function() {
var scrollbtn = false;
//detect scroll
$(window).scroll(function(){
if(scrollbtn == false){
var scrollTop = $(window).scrollTop();
var docHeight = $(document).height();
var winHeight = $(window).height();
var scrollPercent = (scrollTop) / (docHeight – winHeight);
var scrollPercentRounded = Math.round(scrollPercent*100);
if (scrollPercentRounded > 50) {
$(‘.scrollup’).css({‘bottom’: 20}).fadeIn();
} else {
$(‘.scrollup’).fadeOut();
}
}
});

//scroll-to-top
$(‘.scrollup’).click(function(){
scrollbtn = true;
var docheight = $(window).height();
$(‘.scrollup’).stop().animate({
‘bottom’ : docheight
}, 2000).fadeOut(function(){
scrollbtn = false;
});
$("html, body").animate({ scrollTop: 0 }, 1200);
return false;
});
});
</script>
[/java]

7. That’s it now test your website in any web browser

Note: It is better to create a separate footer (footer.php) and add all of your footer content inside footer.php along with scroll to top code, this avoids whiting scroll to top code HTML code in all the pages.

It would be great if you give a backlink as credit, if you use this code in your website.

• CSS
• HTML
• jQuery
• Source Code