FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

30 August 2011

Tuesday's Tips -Adding Scroll to Top Floating Button

Ever wanted to put that nifty little 'Scroll to Top' button on your blog? Here's a simple how to!
(Wondering what I'm talking about? Try scrolling down my blog and look in the bottom right hand corner. Nifty, right?)

Go to your dashboard > design tab > edit HTML section.

First search for this piece of code in your HTML:
]]></b:skin>

Directly after that copy and paste this code:

<style type='text/css'>
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:50px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:5px;right:5px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr(&quot;href&quot;);
            if ($(window).scrollTop() != &quot;0&quot;) {
                $(this).fadeIn(&quot;slow&quot;)
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == &quot;0&quot;) {
                    $(scrollDiv).fadeOut(&quot;slow&quot;)
                } else {
                    $(scrollDiv).fadeIn(&quot;slow&quot;)
                }
            });
            $(this).click(function() {
                $(&quot;html, body&quot;).animate({
                    scrollTop: 0
                }, &quot;slow&quot;)
            })
        }
    });
    $(function() {
        $(&quot;#w2b-StoTop&quot;).scrollToTop();
    });
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to <br>Top</br></a>

Save your changes and enjoy your new scroll to top button!

You can always customize how it looks by editing the style section of the code you just copied and pasted. If you have any questions, don't hesitate to ask!

School officially starts today. It is going to be one busy year! This semester I'm taking H. Modern World Studies, German III, Drawing and Design I, Trig and Pre-Calc, PSSA Math Prep, and Career Path 3. Plus I'm doing a photography course and a Bible study on my own. =D
Have you started school yet?

Love in Christ,

15 comments:

Unknown

Thank you so much! It was so easy and it looks beautiful!

Classic Kniterature

This is great! I can't wait to try it. I tried following a different tutorial for this the other day, and it wasn't what I wanted. This, however, is exactly the way I want it!

Emily Grace

You girls are so welcome! =D

Grace

Oh, wow!!! That was so easy and so amazing. Here's what blog I applied the tutorial to :: gracecraftingstitchbystitch.blogspot.com

Thank you so much, Emily! I really really appreciate all of your tutorials. You are definitely one of the top sites I look to for blog designing tutorials.

Keep of the fantastic job.
Love in Christ,
Grace
gracesgardenwalk.blogspot.com

Anonymous

Hi Emily, I'd so love to try this, but I can't seem to find that snippet of code. Can you pinpoint whereabouts it could be?
I did find two areas where it was found, towards the end of the HTML, and the Scroll To Top...thingie (sorry, don't know the proper term! :]) appeared, but it didn't work. It wasn't clickable and just sat there as a graphic. What could I be doing wrong?

Emily Grace

Eva - Which snippet of code are you referring to?
Make sure you copied all of the code. The very last line is what makes the button clickable.
If it still doesn't work, let me know the link to the blog you're putting it on. I'll take a quick look at the code and see what might be the problem.
Hope this helps!

Anonymous

Emily, snippet of code: the ]]> that you're wanting us to look for.

I'll continue to try it. Perseverance and all that. :) I'm certain I'm just doing something wrong that I'm not aware of.

Thanks!

Maggie

Oh my goodness - thank you! This is amazing!

Bridget Grace

Thanks so much for posting this, Emily! :) However, after posting the code, i went to my blog to see if it would work and there is no "link" on the button in the corner. Any ideas? :)
Thanks again, Emily!
~Bridget Grace

Emily Grace

Eva - It could be that you're using a different template that doesn't have that code. I suggest using the old Minima template.

Bridget Grace - Double check to make sure you copied all of the code. If you let me know the link to your blog, I can take a look at your code to see if there might be any other problem.

Bridget Grace

Http://www.inthearmsofabba.blogspot.com

Thanks so much, Emily! :)

Emily Grace

Bridget Grace - I'm guessing that it has to do with the template you're using--Watermark. I started out using that template, but because it wouldn't work with the scrolling button widget among other things I switched to the Minima template. (I think it has something to do with the overlay that the watermark template has...) I'd suggest using Minima if you're using my tutorials--it is the only template I use and therefore the only one that I know works with my tutorials.

Anonymous

Hi Emily, I did learn how to set up the old Minima template, and am now using it. I wondered at the time if that was my problem and since the 'Scroll to Top' coding actually works now, that must've been it. Quite excited!! Thank you.

I'm wondering if I could request a couple of tutorials? Both are "features" that you currently have on your blog...
I have looked all over for information/tutorials, but most of what I've found is unclear and/or too complicated for a newbie like me. I like that your tutorials are easy to comprehend and follow. And especially now that I know for sure you're also using Minima, also makes it easier.

1) The way the comment avatars are circles. How to do that? SUCH a cute look, and adds that perfect, unique finishing touch.

2) How to add the "designed by..." information at the bottom of the blog, with links, like you have done.

When you have time?

Thanks so much.

Eva.

Bekah

Hi Emily! I just added your scroll yo top button and I LOVE it! I was wondering if you could tell me what I could do to change the text, the text size and color. I just can't seem to find it! Thanks! Bekah

Emily Grace

Eva - That's great that you got it to work! I covered how to make the comment avatar image appear as a circle in this post. I'll make a note to post about the credit link I have at the bottom of my blog. :)

Bekah - The following section controls how the button looks:
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:50px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:5px;right:5px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}



Add your css code at the end of a section(which is notated by the semicolon) anywhere between the brackets {}. See this post for how to change the text using css. Does that make sense?

Post a Comment

Leave your thought...