Add Scroll Back to Top of page Functionality in WordPress

How to add a scroll back to top of page in WordPress? – I am sure there are a dime a dozen tutorials and plugins on this subject – here is the solution I went with.

jQuery scrollToTop was my choice of poison, download and install the scrollToTop.min.js file in your theme’s js folder and create an init file with the following…

jQuery(document).ready(function($){
$(function() {
$("#toTop").scrollToTop(800);
});
});
view raw scrollo.js hosted with ❤ by GitHub

Name it scroll-init.js and also move the init file to your theme’s js folder…

Enqueue these files by adding this to your functions.php

<?php //<~ don't add me in
add_action( 'wp_enqueue_scripts', 'scrollo_scripts_styles', 997 ); // All the rest load before.
function scrollo_scripts_styles() {
wp_enqueue_script( 'scrollo' , get_stylesheet_directory_uri() . '/js/jquery.scrollToTop.min.js', array( 'jquery' ), '1', true );
wp_enqueue_script( 'scrollo-init' , get_stylesheet_directory_uri() . '/js/scroll-init.js', array( 'scrollo' ), '1', true );
}
view raw scrollo.php hosted with ❤ by GitHub

Now create the echo out the HTML link tag also add to functions.php

view raw scrollo-link.php hosted with ❤ by GitHub

And some CSS for your style.css to get the party started…

#toTop {
display: none;
position: fixed;
bottom: 5px;
right: 10px;
width: 80px;
height: 80px;
opacity: 0.8;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#toTop:after {
content: "\f343";
font-family: dashicons;
color: #fff;
background-color: #444;
font-size: 35px;
border-radius: 50%;
padding: 5px;
}
view raw scrollo.css hosted with ❤ by GitHub

1 Comment

  1. Dallin on October 1, 2016 at 6:27 am

    Thanks for writing so many great articles. Keep up the good work!

Leave a Comment





%d bloggers like this: