Saturday, November 25, 2017
Home Web Master blogger How to Add a “Back To Top” Button to Any Blog (Blogger,...

How to Add a “Back To Top” Button to Any Blog (Blogger, WordPress

13
3

Having a lot of content means a lot of scrolling. It helps to make things a little easier for your readers if you include an easy way to jump all the way back to the top of the page. Adding a Back To Top button can easily solve scrolling issues and is really simple to implement! I’ve included a really easy Back To Top button here for you that you can add to any website or blog. All you need to edit are the theme’s CSS file and the main HTML template file.

Add a Back To Top button to your site:

To get started, add this to the CSS section of your site. In Blogger, this would be under Template > Customize > Advanced > CSS. In WordPress this is your theme’s style.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;
}

Then, make sure your site is loading jQuery. Add this code in the <head> section of your template’s main HTML file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

If you already have a similar jquery script in there, you don’t need to add this one. One jQuery script is enough! Next, add the following code directly before the </body> code in your template’s main HTML file. In Blogger, go to Template > Edit HTML and search for </body> and add this above it:

<a href="#" class="back-to-top">Back to Top</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Save your template and you should see the Back to Top link appear as you scroll down the page!

Previous Post

Free Google Play Movies & TV APK for Windows 8

Free Google Play Movies & TV APK for Windows 8 Screenshots                       ... Read more

Next Post

The Ultimate HTML Cheat Sheet For Beginners

Below is a complete guide of HTML codes that you can copy and paste for use on your own blog or website. ... Read more

3 COMMENTS