Scroll to Top for Thematic

I will be recreating the exact functionality of the original Animated Scroll to Top from webdesignerwall.com, but for use on the Thematic Framework for WordPress. It won’t take you very long to realize that the way it is set up isn’t very useful for some of Thematic’s default layouts without some CSS love. Either way, with some slight modifications, this is a very handy little feature and a good introduction to how to bolt on some jQuery functionality into a Thematic Child Theme.

This will not work for Thematic 0.9.7.7, you will need the latest stable development release. There is an problem with the footer-extensions.php in the older version.

All this involves files inside your Thematic Child Theme, hopefully you have that child theme thing down already and why it is important. For example purposes, the name of my child theme is “scottnix”.

Create a custom.js file

In your child theme, if you don’t already have one, create a folder called “scripts”. In that scripts folder then create a “custom.js” file and insert the jQuery code (below) which will target the #back-top html we will be adding.

jQuery(document).ready(function(){
    jQuery("#back-top").hide();     
        jQuery(window).scroll(function () {
            if (jQuery(this).scrollTop() > 100) {
                jQuery('#back-top').fadeIn();
            } else {
                jQuery('#back-top').fadeOut();
            }
        });
        jQuery('#back-top a').click(function () {
            jQuery('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
});

Add to functions.php

The first function “childtheme_scroll_to_top_script” will load your custom.js file, It will correctly enqueue the script in the footer. The idea behind calling it in the footer is the site content will load before the script, which gives the illusion of a faster loading site.

The second function “childtheme_override_siteinfoclose” will override Thematic’s standard siteinfoclose and add in the additional html. I have also modified the link to jump to the #wrapper, since out of the box, this is the top most ID in Thematic.

// loads custom.js file right above the closing body tag.
function childtheme_scroll_to_top_script() {
    wp_enqueue_script('scroll_to_top', get_bloginfo('stylesheet_directory') . '/scripts/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'childtheme_scroll_to_top_script');

// override existing siteinfoclose to add the html right inside the #siteinfo div
function childtheme_override_siteinfoclose() { ?>
    		<p id="back-top"><a href="#wrapper"><span>Back to Top</span></a></p>
        </div>
	<!-- #siteinfo -->  
	<?php
}

Add to style.css

Pretty self-explanatory here, just add this to your CSS. At the least I would recommend putting it near the rest of your site info/footer CSS just to keep the document well structured.

#back-top { position: fixed; bottom: 30px; margin-left: -150px; }
#back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
#back-top a:hover { color: #000; }
#back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(images/scroll-to-top.png) no-repeat center center; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; }
#back-top a:hover span { background-color: #777; }

Add the image

Hopefully you already have a images folder, if not create one in your child theme and drop in a image named “scroll-to-top.png”, although you should already be able to see the functionality already working without it.

That’s it

For this site I chose to go a little bit of a different route and have built it into my WordPress 3.0 Menus since my site is no longer built on Thematic. Even if you don’t use a fixed position the script is useful because it will not be invoked if the page is too short and it will give you the smooth scrolling.