15+ Back To Top Buttons! Add to Blogger

“Back to top” Buttons allows users to smoothly scroll back to the top of the page. In this post today we are going to share 15+ Back-To-Top Buttons for Blogger Blog that helps users jump to the top of a given page. A visitor can achieve this effect by pressing the “Home” button on their keyboard; however, not every user is aware of that shortcut, and most probably use the vertical scroll bar in the browser for that purpose. As designers, we can help our users out by adding a Back To Top Button To Blogger Blog.

Use Of Back To Top Button

Unfortunately, this friendly service — letting users jump to the top of the page — is offered very rarely. Most designers don’t include it, which is why it took us over 5 weeks to collect at least a few dozen nice examples for this post.

Use : “websites with long pages can offer visitors a nifty feature that saves time and avoids the need for vertical scrolling with the mouse.“

Where Should “Back To Top” Button be Placed?

The most obvious and common place for a “Back to top” link is the footer. This is where it belongs and should be placed. Some designers place it on the left side of the footer, others place it in the middle and yet others put it on the right side of the footer. It is also very common to place the “top” link on the left-hand side of the content area, directly under the article.

How To Add Back To Top Button To Blogger Blog?

• Go To Blogger Dashboard >> Layout >> Add A Gadget >>HTML/JavaScript.
• Now Select Back To Top Button Design from below list and Paste code.

Back To Top Button #1

     <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://3.bp.blogspot.com/-YCea1KKQqco/VijWoyeK-0I/AAAAAAAAD-0/6-vZWatQPl4/s1600/back-to-top-button-style-1.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #2

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://2.bp.blogspot.com/-RnE9_s2c8Cw/Vij48H0x3zI/AAAAAAAAEBA/u6quWD8QuGI/s1600/back-to-top-button-style-2.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://1.bp.blogspot.com/-LJ3q2nsoroA/VijyG_ZIHdI/AAAAAAAAD_E/JInDPMUeVKc/s1600/back-to-top-button-style-3.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #4

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://1.bp.blogspot.com/-4TiatbIyNLc/VijzOokllcI/AAAAAAAAD_Q/WqbvoBSZxCc/s1600/back-to-top-button-style-4.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #5

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://2.bp.blogspot.com/-HJoU4m1tRN8/VijzPdtpoUI/AAAAAAAAD_U/LcmUW8KFVqk/s1600/back-to-top-button-style-5.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #6

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://4.bp.blogspot.com/-LB1tjjlLHrg/Vij11UTaeNI/AAAAAAAAD_k/S5_4uZ1g7-E/s1600/back-to-top-button-style-6.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #7

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://3.bp.blogspot.com/-5r_aTsC0v9Y/Vij11WSZQUI/AAAAAAAAD_o/a8TMu6eD-N4/s1600/back-to-top-button-style-7.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #8

    <!–BACK TO TOP STARTS–><a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://2.bp.blogspot.com/-z17DX8_a_yA/Vij12MTL-mI/AAAAAAAAD_w/HPqiSzocQu8/s1600/back-to-top-button-style-8.png”/></a><!–mybloggerguides.com–><!–BACK TO TOP ENDS–>

Back To Top Button #9

    <!–BACK TO TOP STARTS–><a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://3.bp.blogspot.com/-YYb0dq1gvvQ/Vij15fEgUdI/AAAAAAAAD_8/LliRH1uk0AY/s1600/back-to-top-button-style-9.png”/></a><!–mybloggerguides.com–><!–BACK TO TOP ENDS–>

Back To Top Button #10

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://3.bp.blogspot.com/-lftEqmWEbsM/Vij15mG4BmI/AAAAAAAAEAA/Fsm0Vf7kYss/s1600/back-to-top-button-style-10.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #11

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://1.bp.blogspot.com/-vziRQMjkHWk/Vij17g3PaEI/AAAAAAAAEAM/oGweTaKeCn0/s1600/back-to-top-button-style-11.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #12

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://2.bp.blogspot.com/-yksVr1qdOdw/Vij198aZ0zI/AAAAAAAAEAU/dkNwRhQQlz0/s1600/back-to-top-button-style-12.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #13

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://3.bp.blogspot.com/-VDjdHbMtM18/Vij1_AFNEII/AAAAAAAAEAc/gkPrA8Vqbgk/s1600/back-to-top-button-style-13.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #14

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://2.bp.blogspot.com/-S6SsKWawT3c/Vij1_vfE5VI/AAAAAAAAEAo/5txl0aC46aQ/s1600/back-to-top-button-style-14.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #15

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://4.bp.blogspot.com/-YIK16tuLilU/Vij2Aotv9MI/AAAAAAAAEAg/AFxk5boTMK0/s1600/back-to-top-button-style-15.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

Back To Top Button #16

    <!–BACK TO TOP STARTS–>
    <a rel=”nofollow” style=”display:scroll;position:fixed;bottom:10px;right:5px;” href=”#” title=”Back to Top”><img src=”http://1.bp.blogspot.com/-vP0kF_QPPds/Vij2AjDTnuI/AAAAAAAAEAk/38Hbv5jHAws/s1600/back-to-top-button-style-16.png”/></a><!–mybloggerguides.com–>
    <!–BACK TO TOP ENDS–>

• Now Save HTML/JavaScript.
• That’s it. You have added Back To Top Button To your Blogger Blog. Now open your blog and scroll down and give your feedback about this widget by dropping a comment below.