Adding Scroll To Top In WordPress Site

In this blog, we will learn about how to add a scroll to the top button in WordPress Site.Scroll To Top ButtonAdd the scroll to top button in footer.php Note that some of the classes I am using are from tailwindcss.

<div id="footer-wrapper" class=" text-white footer-wrapper">   <footer id="colophon" class="site-footerpt-50px pb-43px lg:pt-85px lg:pb-74px">   <div class="back-to-top">      <button id="back-to-top"><svg class="w-6 h-6 transform -rotate-90" id="icon-arrow-heavy" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 7v-6l11 11-11 11v-6h-13v-10z"/>         </svg>         <span><?php esc_html_e( 'go to top', 'text-domain' ); ?></span>      </button>   </div></div><!-- #footer-wrapper --><?phpwp_footer();?></body></html>

InViewPortAnimationCreate a JS file called in-viewport-animation.js .

         $( window ).on( 'scroll', () => {            this.checkElements();            this.toggleClasses();         } );         this.boundScrollEvent = true;      }   }      toggleClasses( elem = false ) {      if ( ! elem ) {         if ( ! Object.keys( this.elements ).length ) {            return;         }                  Object.keys( this.elements ).forEach( ( path ) => {            if ( 'skip' === this.elements[ path ] ) {               return;            }                        const elem = $( this.elements[ path ] );            const inViewport = this.inViewport( elem );            elem.inViewport = inViewport;            elem.attr( 'data-in-viewport', inViewport ).toggleClass( 'in-viewport', inViewport );                        this.setInlineClasses( inViewport, elem );                        if ( inViewport ) {               this.elements[ path ] = 'skip';            }         } );      } else {         const inViewport = this.inViewport( elem );         elem.inViewport = inViewport;         elem.attr( 'data-in-viewport', inViewport ).toggleClass( 'in-viewport', inViewport );                  this.setInlineClasses( inViewport, elem );      }   }      inViewport( elem ) {      return this.elementBottom( elem ) > this.viewportTop() && this.elementTop( elem ) < this.viewportBottom();   }      elementBottom( elem ) {      return this.elementTop( elem ) + $( elem ).outerHeight();   }      viewportTop() {      return $( window ).scrollTop();   }      elementTop( elem ) {      return $( elem ).offset().top;   }      viewportBottom() {      return this.viewportTop() + $( window ).height();   }}

Debounce functionCreate a JS file called functions.js

/**
 * Calls the given function after the given interval.
 *
 * @param {Object} func Function name.
 * @param {number} wait Time in milliseconds.
 *
 * @return {Function} Debounced function.
 */
export const debounce = ( func, wait ) => {
   
   let timeout;
   
   /**
    * Debounce function.
    */
   return function() {
      
      const context = this,
         args = arguments;
      
      /**
       * Later function.
       */
      const later = function() {
         timeout = null;
         func.apply( context, args );
      };
      
      clearTimeout( timeout );
      
      timeout = setTimeout( later, wait );
   };
   
};

Scroll To Top Main JS file

Create another file called scroll-to-top.js

That’s all folks

/**
 * Back to Top.
 *
 * @package WPR
 */

import { debounce } from "./functions";
import { InViewportAnimation } from './in-viewport-animation';

( function ( $ ) {
   class BackToTop {
      
      /**
       * Constructor.
       *
       * @return {void}
       */
      constructor() {
         
         this.backToTopEl = $( '#back-to-top' );
         this.siteFooter = $( 'footer#colophon.site-footer' );
         this.window = $( window );
         
         // The window scroll position after which we show the scroll to top button.
         this.scrollOffset = 200;
         
         if ( ! this.backToTopEl ) {
            return;
         }
         
         this.addEvents();
         
      }
      
      addEvents() {
         
         this.backToTopEl.on( 'click', this.scrollWindowToTop );
         this.window.on( 'scroll', () => debounce( this.toggleScrollToTopBtnVisibilty(), 1000 ) );
         
         new InViewportAnimation();
      }
      
      /**
       * Toggle scroll button visibility.
       *
       * When the scroll position is large than scrollOffset
       * we will show the scroll to top button,
       * else hide it.
       *
       * @return {void}
       */
      toggleScrollToTopBtnVisibilty() {
         
         // If the scroll position is larger than scrollOffset.
         if ( window.scrollY > this.scrollOffset ) {
            this.backToTopEl.addClass( 'is-visible' );
            
            const top_of_element = this.siteFooter.offset().top;
            const bottom_of_element = this.siteFooter.offset().top + this.siteFooter.outerHeight();
            const bottom_of_screen = $( window ).scrollTop() + $( window ).innerHeight();
            const top_of_screen = $( window ).scrollTop();
            
            if ( ( bottom_of_screen > top_of_element ) && ( top_of_screen < bottom_of_element ) ) {
               const diff = bottom_of_screen - top_of_element;
               this.backToTopEl.parent( '.back-to-top' ).css( 'bottom', ( 20 + diff ) + 'px' );
            } else {
               this.backToTopEl.parent( '.back-to-top' ).css( 'bottom', '20px' );
            }
         } else {
            this.backToTopEl.removeClass( 'is-visible' );
         }
      }
      
      /**
       * Scroll window to top.
       *
       * When the back to top button is clicked scroll to top position.
       * @return {void}
       */
      scrollWindowToTop() {
         window.scrollTo( {
            top: 0,
            behavior: 'smooth'
         } );
      }
      
   }
   
   new BackToTop();
   
} )( jQuery );

Scroll To Top CSS

.back-to-top {
   display: none;

   @screen lg {
      position: fixed;
      bottom: 20px;
      right: 0;
      align-items: center;
      margin: auto;
      height: 140px;
      width: 100px;
      justify-content: center;
      z-index: 3;
      display: flex;
   }

   button {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #d5d7d8;
      cursor: pointer;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 137.74%;
      border-color: transparent;
      background-color: transparent;
      opacity: 0;
      -ms-user-select: none;
      user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      -o-user-select: none;
      transition: all .5s ease;
      transition: color 0ms;

      &.is-visible {
         opacity: 1;
         animation: fadein 1s;
         -moz-animation: fadein 1s;
         -webkit-animation: fadein 1s;
         -o-animation: fadein 1s;
      }

      svg {
         filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(1993%) hue-rotate(169deg) brightness(99%) contrast(70%);
      }

      &:hover {
         color: grey;
         background-color: transparent;

         svg {
            filter: brightness(0) saturate(100%) invert(46%) sepia(9%) saturate(10%) hue-rotate(328deg) brightness(92%) contrast(85%);
         }
      }
   }
}

That’s all folks