Troy Chaplin

Design & Development

Posted in the Blog

How to Add a Pinterest Style Scroll to Top Link in Your WordPress Theme

With more and more sites moving away from pagination in areas such as blog lists and archives and implementing a Facebook and Twitter style infinite scroll it makes sense to give user a quick and simple way to get back to the top of your site. Pinterest does this very well by adding a tab in the bottom corner of your browser window that follows up around as you scroll down through your favorite pins.

Adding this feature to a site is quite easy, but for those of you who are not comfortable modifying your WordPress theme files can use a plugin called Dynamic To Top by Matt Varone, who also released the jQuery plugin that we’ll use in the following tutorial to add this functionality manually.

To add this manually to your site instead of using a plugin visit Matt’s site and download the script, which also includes your CSS, image and the optional jQuery Easing plugin. When adding the easing plugin the page will quickly scroll up the page in a nice, fluid motion whereas without it the page will make an instantaneous jump back to the top.

Be sure to make note of where you are placing these and the other files in the theme as you’ll want to change the source path throughout this tutorial to match yours.

In order for this to work you’ll need to have jQuery loaded in your theme. Check your source code to see if you can find an instance of jquery.js, if you can’t, you may need to add a function to enqueue it. Because jQuery is included in the WordPress core, you can add this to your theme functions file:


function include_jquery() {
	wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'include_jquery');

While some would recommend using the jQuery that is included with WordPress, I prefer using the latest version hosted by Google. If you want to replace the included jQuery with the one from Google, add the following to your functions file:


function modify_jquery() {
	wp_deregister_script('jquery');
	wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3');
	wp_enqueue_script('jquery');
}
add_action('init', 'modify_jquery');

Let’s start by copying the 2 script files into your theme folder. Open your footer.php file and add the following 2 lines somewhere just above the closing body tag:


<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/easing.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.ui.totop.min.js"></script>

<!-- Scroll to Top Function -->
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$().UItoTop({ easingType: 'easeOutQuart' });
	});
</script>

Next, copy the three classes from the ui.totop.css file and add it to your themes style.css file or any other stylesheet that you’ve created and are using. Update the background image URL to the where you copied it within your theme.


#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url(library/images/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background:url(library/images/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);
}

#toTop:active, #toTop:focus {
	outline:none;
}

That’s it! Now as visitors browse through your site they will have a quick way to get back to the top, no matter how long your page is. Big thanks to Matt Varone for a nice light weight script that adds a great piece of functionality!

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=""> <s> <strike> <strong>