How to scroll to top using jquery in wordpress without plugins

Introduction

This article describe How to setup Scroll to Top on button press using jquery as its feature.

As you have seen on some webpage that there is a floating button appear at the bottom of the page whenever the webpage is scrolled to some distance from the top. Once clicked on this button, the webpage will be auto scrolled to the top of the page. It means the user does not need to scroll to reach the top of the page by scrolling your mouse or clicking up the arrow in the scroll bar. Just press this button, the user will be reached at the top of the page smoothly. This feature thus called a Scroll to Top.

You can view Demo here scroll to top

We let you know how to achieve this feature by using jQuery and CSS. There are all together 3 parts needed which are as below.

Part 1. Add scroll to top using jQuery.scroll.js

jQuery.scroll.js : download this file and enqueue it.

• scrollup v2.4.1  
• Url: http://markgoodyear.com/labs/scrollup/ 
• Copyright (c) Mark Goodyear — @markgdyr — http://markgoodyear.com 
• License: MIT

Part 2. Add scroll button CSS

CSS : Add below CSS in style.css

#scrollUp {    
right: 30px;    bottom: 85px;    color: #fff;    opacity:1;    background: #e6e6e6;    font-size: 18px;    width: 45px;    height: 45px;    line-height: 45px;    color: rgb(57, 57, 57);    text-align: center;    border-radius: 25px; 
}
#scrollUp:hover {    
opacity:1;    background:rgb(182, 183, 184);
}

Part 3. Add jQuery scroll to top function

Your js content : Add below js code and enqueue it.

(function($) {  
"use strict";   
$(document).on('ready', function() { 
 $.scrollUp ({        
scrollName: 'scrollUp',      // Element ID        
scrollDistance: 800,         // Distance from top/bottom before showing tisis helpful the adjust the distance element (px)        
scrollFrom: 'top',           // 'top' or 'bottom'        
scrollSpeed: 1000,            // Speed back to top (ms)       
animationSpeed: 200,         // Animation speed (ms)        
scrollTrigger: false,        // Set a custom triggering element. Can be an HTML string or jQuery object        
scrollTarget: false,         // Set a custom target element for scrolling to. Can be element or number       
scrollText: ["<i class='fa fa-arrow-circle-up' </i>"], // Text for element, can contain HTML        
scrollTitle: false,          // Set a custom <a> title if required.        
scrollImg: false,            // Set true to use image       
 activeOverlay: false,        // Set CSS color to display scrollUp active point, e.g '#00FFFF'        
zIndex: 2147483647           // Z-Index for overlay
});   
}); 
})(jQuery);

Process:

• Download jQuery.scroll.js from the given link to your theme folder such as /js folder.
• Add above your js content code in one of your theme js file such as theme.js and keep it in /js folder and CSS code in style.css
• Enqueue both above two js files in function.php inside
  • function theme_name_scripts() {
    • wp_enqueue_script( ‘scroll-js’, get_template_directory_uri() . ‘/js/jquery.scrollUp.js’, array(), ‘20181201’, true )
    • wp_enqueue_script( theme-js’, get_template_directory_uri() . ‘/js/theme.js’, array(), ‘20181201’, true );
      
  • }
  • add_action( ‘wp_enqueue_scripts’, ‘theme_name_scripts’ );

Conclusion:-

Now you can see a button appear on the bottom of your page when you scroll to some distance from top ie .800px. Once you click it, you will reach at the top of your page. Below is the example of scroll to top using jquery feature.

Example as shown in below image with scroll to Top button in Red square

This feature is available in our theme called New Blog a free wordpress theme. Button appear in the footer implements scroll to top feature.