Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make a Back to Top button in WordPress
@link https://premium.wpmudev.org/blog/back-to-top-button-wordpress/
<?php
function enqueue_my_scripts() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/topbutton.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
.topbutton {
font-family: "FontAwesome";
content: '\f077'; // fa-chevron-up
color: $color__white;
background-color: darken( $color__bright_blue, 10% );
height: 30px;
width: 40px;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1;
display: none;
.icon {
display: block;
margin: 0 auto;
top: 2px;
}
&:before {
content: "";
display: block;
position: absolute;
top: -5px;
-webkit-transform: skewY(14deg);
transform: skewY(14deg);
width: 100%;
height: 100%;
background-color: darken( $color__bright_blue, 10% );
}
}
/**
* @link https://premium.wpmudev.org/blog/back-to-top-button-wordpress/
*/
jQuery( document ).ready( function( $ ) {
var offset = 100;
var speed = 250;
var duration = 500;
$( window ).scroll( function(){
if ( $( this ).scrollTop() < offset ) {
$( '.topbutton' ) .fadeOut( duration );
} else {
$( '.topbutton' ) .fadeIn( duration );
}
});
$( '.topbutton' ).on( 'click', function() {
$( 'html, body' ).animate( { scrollTop:0 }, speed );
return false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.