WordPress

How To Create A Pinterest Scroll To Top Button WordPress Plugin

In a previous tutorial you would of learnt how you can use jQuery to create a scroll to top button on your website so when you click the button it will scroll you back to the top of the page.

This is a really useful feature for websites which have a large scrolling page or infinite scrolling. The types of websites that will need this feature are content heavy website for example blogs. There are loads of blogs with massive pages because of all the great content on there. It would be so useful to have a scroll to top button on them...as most blogs are on WordPress I've decided to take the previous scroll to top tutorial and turn this into a WordPress plugin.

Why Pinterest?

Pinterest-Logo Currently the big website in social media is pinterest, who has a scroll to top button appear in the bottom right corner of the website. This scroll to top button is not just a simple button on a website you need to scroll down before it will appear on the page, the button also has some CSS animation to slide into view and once you are at the top of the page the button will slide back off the page.

With the added complexity of this button I've decided to recreate this scroll to top button but as a WordPress plugin and in this tutorial and I'm going to show you how you can do it too.

Define The WordPress Plugin

First we are going to start off by creating the WordPress plugin this way all the HTML elements are on the page and the jQuery is included on the page.

Create a php file and add the following in the top of the file.

/*
Plugin Name: Paulund Scroll To Top
Plugin URI: http://www.paulund.co.uk
Description: Adds a jQuery scroll to top button at the bottom of the page.
Author: Paul Underwood
Version: 1.0
Author URI: http://www.paulund.co.uk/
*/

When the plugin is defined the following script will run when you activate the plugin. I prefer working with PHP classes this way I know that the code will not conflict with anything else defined on WordPress.

For this plugin we are going to create a PHP class inside the plugin file to create the scroll to top button. All this class has to do is add some HTML on the page which we will use as the button, add a CSS file to the page so we can style the button and add jQuery to page to scroll back to the top.

Below is the basic structure of the PHP class.

/**
 * The Paulund scroll to top plugin
 */
class Paulund_Scroll_To_Top{
		
	public function __construct(){

	}
	
	public function Scripts_Method() {			

	}		
	
	public function Add_Html(){
	
	}
}

Constructor Function

The constructor function needs to add the jQuery and CSS to the page for this we are going to add an action to the wp_enqueue_scripts action which will run the function scripts method.

We are also going to use the constructor to add the HTML which will be the button, we are going to add this HTML to the bottom of the page, this means we are going to add a function to be ran on the wp_footer action.

public function __construct(){
	add_action( 'wp_enqueue_scripts', array(&$this, 'scripts_method') );
	add_action( 'wp_footer', array(&$this, 'Add_Html') );	
}

Scripts Method Function

This script methods function is used to add both the jQuery and the CSS to the page. For this to work we need to include jQuery on the page, we can then create our custom Javascript file which we are going to add a custom function to scroll the page to the top.

We are also going to include a CSS file so we are style the button to look the same as the Pinterest button.

public function Scripts_Method() {
	wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', ( 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' ), false, null, true );
        wp_enqueue_script( 'jquery' );
				
	// Register styles and js
	wp_register_style( 'toolbar_settings_css', plugins_url( '/paulund-scroll-to-top/css/style.css' ) );
	wp_register_script( 'toolbar_settings_js', plugins_url( '/paulund-scroll-to-top/js/script.js' ), false, null, true );
		
	wp_enqueue_style( 'toolbar_settings_css' );
	wp_enqueue_script( 'toolbar_settings_js' );
}

Add HTML

The final function in the plugin is going to add the HTML to the page in the wp_footer action. The HTML for the button is very simple it's just going to be a div with some text.

public function Add_Html(){ ?>

Scroll To Top

The Javascript

Below is the Javascript which is added to the page, this is what we are going to include on the page using the wp_enqueue_script.

Here we going to add all the Javascript inside a $(document).ready() function.

We are going to start off by adding an event to the window scroll event, this function will run when the visitor scrolls down the page. We need to do a check on the current position of the scroll bar as we only want the button to appear when you scrolled down the page. For this we are saying if the scroll position is over 200 pixels then display the button.

The way we are displaying the button is to change the position of the button up to -10px and to hide it we are going to move the button out of view by placing the bottom position to -100px. We are wrapping the change of pixel position around the jQuery animate function, this way the button will slide in and out of view.

//Check to see if the window is top if not then display button
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			$('.scrollToTop').animate({'bottom':'-10px'}, 350);
		} else {
			$('.scrollToTop').animate({'bottom':'-100px'}, 350);
		}
	});

Next we can setup the button click event, this will set the scroll back to the top of the page. For this it's very simple we just add a click event on the .scrollToTop class, on this click event we are going to animate the scrollTop back to the top of the page.

//Click event to scroll to top
$('.scrollToTop').click(function(){
	$('html, body').animate({scrollTop : 0},800);
	return false;
});

Below is the full javascript we are going to use for the plugin.

/**
 * @author Paulund
 */
if (jQuery) {
	$(document).ready(function(){
		
		//Check to see if the window is top if not then display button
		$(window).scroll(function(){
			if ($(this).scrollTop() > 200) {
				$('.scrollToTop').animate({'bottom':'-10px'}, 350);
			} else {
				$('.scrollToTop').animate({'bottom':'-100px'}, 350);
			}
		});
		
		//Click event to scroll to top
		$('.scrollToTop').click(function(){
			$('html, body').animate({scrollTop : 0},800);
			return false;
		});
	});
}

Style Like Pinterest

As mentioned above this is a button to act like the pinterest button, to do this we need it to look like the pinterest button.

Below is the CSS we are using to style the button just like Pinterest.

.scrollToTop{
	right: 15px; 
	bottom: -100px; 
	width: 50px; 
	padding: 20px 10px 25px; 
	text-align:center;
	font-family: 'helvetica neue', arial, sans-serif;
	font-weight: normal;
	color: #666060;
	text-decoration: none;
	position:fixed;
	cursor: pointer;
	font-size: 15px;
	border-radius: .3em;
	border:1px solid #BBB;
	background-color: #f0eded; 
	background:-moz-linear-gradient(center top, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded); 
	background: -o-linear-gradient(top left, #fdfafb, #f9f7f7 50%, #f6f3f4 50%, #f0eded); 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfafb), to(#f0eded), color-stop(.5,#f9f7f7),color-stop(.5,#f6f3f4)); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfafb', endColorstr='#f0eded');
}
.scrollToTop:hover{
	text-decoration:none;
}
Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial