011 - 25985558 / +91-9899123990hello@eonian.co.in


How to Add Back to Top button in HTML Website using JQuery

  by Eonian
|   22-Nov-16

blog

Learn How to Add Bottom to Top Scroll Effect in HTML website using the JavaScript Code.

Follow simple steps to Add Back to Top function in your Website. Do you have lot of content in your website and looking for the simple Back to Top HTML code that will send your users to the Top of your web page within single click? If your answer is yes then you are at right place. Here I will explain simplest method of adding the Bottom to Top Scrolling effect in your website. You only need to do add some code in your CSS, JS and HTML file.

How to Add Back to Top Bottom to HTML Website

To start the process, first of add the CSS code given below in your website. You can add this code in your style.css file in HTML and WordPress. If you are using Blogger then you need to add this code under the Template >> Customize >> Advance >> CSS file.

                    .back-to-top {
                    display:none;
                    position: fixed;
                    bottom: 2em;
                    right: 0px;
                    text-decoration: none;
                    color: #000000;
                    background-color: rgba(235, 235, 235, 0.80);
                    font-size: 12px;
                    padding: 1em;  
                    }

                   .back-to-top:hover {    
                    background-color: rgba(135, 135, 135, 0.50);
                    text-decoration:none;
                    color:#ffffff;
                    }

After that add JQuery to your website. For that just add the code given below in your section.

"http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"

If you have already added the JQuery in your Website then you don’t need to do the same again. Now add the Code given below in the section of your HTML website.

                    Back to Top
                    
                    jQuery(document).ready(function() {
                    var durationtime = 500;
                    var offset = 220;
                    jQuery(window).scroll(function() {
                   if (jQuery(this).scrollTop() > offset) {
                   jQuery('.back-to-top').fadeIn(durationtime);
                   } else {
                   jQuery('.back-to-top').fadeOut(durationtime);
                    }
                    });
                   jQuery('.back-to-top').click(function(event) {
                   event.preventDefault();
                   jQuery('html, body').animate({scrollTop: 0}, durationtime);
                   return false;
                    })
                    });
                  

And that’s it! Save the files and Open the HTML file in your Browser.

Conclusion

In this article, I have explained the easiest way of adding the Bottom to Top HTML Code in Website. Hope this code will resolve your problem.

With '12+ years of expertise in Design & Branding. He is excelled in his forte and possess 'Master Degree in Design' from MGU and has done 'Digital Marketing' from DSIM. He has been with organizations like Zee, IBN-7, CNN-IBN, India News & his last stint was with NewsX for 5 consecutive year where he was a 'Head of Design' before commencing this venture called 'EONIAN'. Where we cater the Design & Brand Promotion Services. Apart from the work forte he handles, He is also a Flute player and Candid Photographer.