Back to the Top Function
Update
Elementor still doesn’t have a native back to the top button but Jim Fahad’s video https://jimfahaddigital.com/tutorial/scroll-to-top-reveals-after-page-scrolling-down-using-elementor/ gives an excellent method that means no additional javascript, CSS or functions. There is one limitation it doesn’t work with a sticky header.
It would be great if Elementor included a back to the top widget but it doesn’t. If you are using a theme that provides one that’s great too but if you are keeping it “bare bones” with the Elementor Hello Theme it can mean you have to have another generally unnecessary plugin.
To provide a Back to the Top button I have added a Function to a Hello Theme Child that uses a script that is placed in a directory called js in the child theme zip file.
Back to the top Function
/**
* Enqueue button javascript script.
*/
function themeslug_add_button_script() {
wp_enqueue_script( ‘custom-script’, get_stylesheet_directory_uri() . ‘/js/back-to-top.js’, array( ‘jquery’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘themeslug_add_button_script’ );
/**
* Add button HTML to the footer section.
*/
function themeslug_add_scroll_button() {
echo ‘<a href=”#” id=”topbutton”></a>’;
}
add_action( ‘wp_footer’, ‘themeslug_add_scroll_button’ );
// END Add button HTML to the footer section.
back-to-top.js
jQuery( document ).ready(function($){
var offset = 100,
speed = 250,
duration = 500,
scrollButton = $(‘#topbutton’);
$( window ).scroll( function() {
if ( $( this ).scrollTop() < offset) {
scrollButton.fadeOut( duration );
} else {
scrollButton.fadeIn( duration );
}
});
scrollButton.on( ‘click’, function(e){
e.preventDefault();
$( ‘html, body’ ).animate({
scrollTop: 0
}, speed);
});
});
Custom CSS
/* Scroll to top Button */
#topbutton {
position: fixed;
display: none;
height: 40px;
width: 40px;
line-height: 40px;
right: 15px;
bottom: 15px;
z-index: 10;
background-color: rgba(186,0,0,0.66);
color: #ffffff;
border-radius: 10px;
text-decoration: none;
text-align: center;
}
#topbutton:after {
font-family: “Font Awesome 5 Free”; font-weight: 900; content: “\f106”;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-size: 28px;
font-variant: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
text-rendering: auto;
speak: none;
}
/* END Scroll to top Button */
The “background-color: rgba(186,0,0,0.66);” needs to be set to a color that matches the website color pallet – this is red with opacity at 0.66%. You can also set the icon that appears within the button \f106 is an up chevron but you could have an arrow if you want by putting in the correct FontAwesome code.
Recent Comments