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

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 to achieve this feature by using jQuery and CSS. There are all together 3 parts of it needed which are as below.

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

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);
  • }

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 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’ );
  • Finished. 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.

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

How to setup Scroll to Top on button press in wordprss

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Click to access the login or register cheeseDo NOT follow this link or you will be banned from the site!