Add Scroll To Top Button On Blogger

What we are going to learn today is about adding the back2top button on blogger. This is very easy and useful stuff to implement & doesn’t require any professional knowledge or experience. As the readers of those blogs containing lengthy posts or comments finds it difficult to go back to the top either to reach the navigation bar or to find more things related to the topic they are reading with, so we should provide them something to go back to the top, keeping them relaxed to enjoy the core of your post. So just keep on following step by step and till the end of the post you will get your favorite scroll2top button present at right corner of your blog. So let’s begin,

STEP 1:- Go to your Blogger’s dashboard after signing in to your account.

STEP 2:- Then click Layout.

STEP 3:- Then click to ‘Add a Gadget’ (As shown in image).

STEP 4:- Browse to “HTML/JavaScript” option and click the add(+) option.

STEP 5:- Give it a title like for example ‘Back2top’ or just leave it blank then copy & paste the following codes in the quotes to the Content’s body.

“
<style>
.hulk-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=”text/javascript”
src=”http://arrow.scrolltotop.com/arrow3.js”></script>
<noscript>Not seeing a <a href=”http://www.scrolltotop.com/”>Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>


<script type=”text/javascript”>


/*****tecHulk.com*****/


jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery(‘.hulk-back-to-top’).fadeIn(duration);
        } else { //www.techulk.com/search/label/blogging
            jQuery(‘.hulk-back-to-top’).fadeOut(duration);
        }
    }); 
  
    jQuery(‘.hulk-back-to-top’).click(function(event) {
        event.preventDefault();
        jQuery(‘html, body’).animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>


“

STEP 6:- It will create a black back to top button.

STEP 7:- You can choose a variety of scroll to top buttons from this website over Here.

STEP 8:- Copy the codes of your selected button and replace the codes with the red marked ones above in the code.

Thats all, now you are done.

If you have any problem related to the post or other topics, feel free to talk2us, just drop your comments or ask us personally by our contact us form we will give you support Asap.

STAY TecHulked!!!!!