Dynamic Animated “Back to Top” Button Using CSS and jQuery

Posted on Jul 7, 2012 in Tips |

Dynamic Animated “Back to Top” Button Using CSS and jQuery

To get the latest news and check out my photos, follow me on RSS, Facebook, Twitter or Google+

There are a ton of tutorials on how to make a dynamic “Back to Top” button on your website, and most of them involve jQuery. The problem is, those tutorials are for standalone websites, not WordPress. The biggest difference is if you’re running a WordPress website, chances are, jQuery has already been installed, and the most important thing is, a function noConflict(); has been called. When this function is called, the syntax for jQuery gets a bit different. I’m going to walk you through how to make it work with WordPress.

Prerequisite: FTP access to your theme files footer.php, header.php, and style.css, some basic knowledge of CSS/CSS3, and HTML.

First, let’s put our actual “Back to Top” button with an arrow using HTML. You could practically put the following code anywhere between the <body> and </body> tags. The CSS will take care of where the button goes. In my case, I put it in my footer.php file, right below the content, and above the footer.

<p id="back-top"><a href="#top">&uarr;</a></p>

This is assuming your theme’s header file has marked an element with id=”top”. I have the href=”top” as a fallback method, in case the user has Javascript disabled. My header.php looks like this:

<div id="top">
    <div id="header">
        blah

Next up, the style code that goes into your style.css. Depending on where you place the actual code for the button, your style might be different than mine as far as positioning the button goes. The key thing here is to make sure it has position: fixed;, which makes the element stay no matter where the users scroll. You can feel free to change the style to your liking. As you can see, I’m a sucker for CSS3, so it’s all about transition. Since CSS3 isn’t official and standardized yet, vendor prefixes are a must. Keep in mind, transition doesn’t work on IE, but you shouldn’t be using it anyway.

#back-top { position: fixed; bottom: 100px; margin-left: -30px; }
#back-top a {
    text-decoration: none;
    text-align: center;
    padding-top: 8px;
    font-size: 28px;
    width: 30px;
    height: 40px;
    display: block;
    background-color: #555;
    color: white;
    -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease;
}
#back-top a:hover { background-color: #f1f1f1; color: #ab0103;

If you don’t want the button to appear dynamically, this is where you stop. The jQuery code below is to make the button only show when the users have scroll down passed 200 pixels. The logic goes something like this:

- After the document has been loaded, hide the “Back to Top” button.
- If the users scroll down passed 200 pixels, show the button; else, hide it.
- When the users click on the button, animate the scrolling to top
- The return false; line is important, as it overrides the normal behavior of the element. If you omit this line, when a user clicks, it’ll jump right on top, which is a normal behavior for an anchor tag, instead of doing the animation.

The animation takes 1300ms, which is 1.3 seconds, which is how I like it. You can change it to different speed as you please. The default value is 400; there are also some keywords like ‘fast’ and ‘slow’, which are 200 and 600, respectively.

<script type="text/javascript">
    // Assuming jQuery.noConflict(); has been called
    jQuery(function () {
        jQuery(document).ready(function () {
            jQuery("#back-top").hide();
            jQuery(function () {
                jQuery(window).scroll(function () {
                    if (jQuery(this).scrollTop() > 200) {
                        jQuery('#back-top').fadeIn('slow');
                    } else {
                        jQuery('#back-top').fadeOut('slow');
                    }
                });
                jQuery('#back-top a').click(function () {
                    jQuery('body,html').animate({
                        scrollTop : 0
                    }, 1300);
                    return false;
                });
            });
        });
    });
</script>

This is only FYI, but for any website that hasn’t called jQuery.noConflict();, you’d use the normal syntax for jQuery, which is replacing every jQuery with the dollar sign ($) within the code.

You’re done. Upload to overwrite these files back to your WordPress theme and off you go. If you have any questions or comments, drop me a few lines below.

Tags: tips

Share this on:

Aisha
Nice explanation!
Unstabletable
Nice tutorial! How would you do a similar button that appears when user is close to bottom?
- http://tambnguyen.com/ Tam Nguyen Photography
  Try fixing this: (I’m half-assing this, so it might need some tweaking)
  jQuery(window).scroll(function () {
  if (jQuery(this).scrollTop() > jQuery(document).height() – 200) { jQuery(‘#back-top’).fadeIn(‘slow’);
  } else {
  jQuery(‘#back-top’).fadeOut(‘slow’);
  }
  });