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.

View Demo

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

Child Theme Scripts Folder Example

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

Child Theme Images Folder Example

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.

4 Comments

  1. Awesome. I am gonna work at putting this on my site next week!! Thanks so much man!

    • woohoo! I did this today on my local host and it worked. YAY! Thanks! Just need to make a picture for it now and upload it to my site! My site really needs this. haha ^_^

      • Glad it worked, hopefully it was fairly easy. The most useful thing is it makes a mini template for adding additional jQuery to Thematic, just combine it into your custom.js folder and it will load it in the footer.

        The one thing I still need to do is change the jQuery in the custom.js to the shortened $, it still needs a No Conflict wrapper and the code would be shortened more, but I didn’t realize till afterwards. I should probably have just done that in the same time it took to write this. But if you wanted to lighten your code the the long run (especially if you add more jQuery) you can save space by using $ instead of jQuery written out in the code.

      • Darn it. I updated to the latest thematic theme on my local host. But my website that is online utilizes thematic feature site. It won’t work. uhuhuh. I am trying to find a way around this. I hope.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>