Blog 101 – How to Create a Scroll to Top Button – {Tutorial}

If you scroll down a little bit, you will see a little arrow appear in the bottom right of the window. That is what I’m going to show you how to achieve today.

——–

Installation:

Note: If you have already installed the JQuery plugin, jump to step 4.

1. From your Blogger Dashboard > Template > Edit HTML 

2. Search for  tag.
3. Copy the code below and paste it before  tag.
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” type=“text/javascript”>script>

4. From your Blogger Dashboard > Template > Edit HTML 


5. Search for  tag.
6. Copy the code below and paste it before  tag.
<style type=“text/css”>#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}#w2btoTop:active, #w2btoTop:focus {outline:none;}style><script src=“http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js” type=“text/javascript”>script><script type=“text/javascript”>$(document).ready(function(){ $().UItoTop({ easingType: ‘easeOutCubic’ }); });script>
7. Preview your change and if everything looks good, click save.


Let me know if you like these kinds of “Blog 101″ tutorials and if you have any requests, please put them in the comments section and I will do as many as I can. :)

Enjoy and I hope you’re having an awesome day!
Print Friendly

Comments

  1. Lowri says:

    WOW – this is a great idea and thanks so much for sharing the tutorial too.
    New follower – I LOVE blogging help!!
    Visiting from TT&J;
    Lowri
    http://papervinenz.blogspot.com

  2. Michaela says:

    Thanks so much for sharing this! I've defiantly been scrolling down and playing with the button! I'm going to be adding this to my blog too!

    coveredinmodpodge.blogspot.com

  3. Natasha says:

    Thanks so much for sharing this!!

    would love it if you could share this on my link party – Serenity Saturday at http://www.serenityyou.blogspot.com

    Natasha xxx

  4. Rosa B. says:

    Fantastic tip! It works beautifully!! Every website needs this feature! :) Thanks a bunch!

Speak Your Mind

*





Copyright © 2012 Between U & Me
Come join us on Thursdays for the Crazy Cute Link Party!
Disclosure of Material Connection:

I received one or more of the products or services mentioned in some of my posts for free in the hope that I would mention it on my blog.

Regardless, I only recommend products or services I use personally and believe my readers will enjoy.

I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”