Add SmoothScroll.js to specified WordPress page based on conditional tag

functions.php

//ENQUEUE JQUERY SMOOTH SCROLL
function smoothscrollfaqs() {
if( is_page('faqs')) {
wp_enqueue_script( 'scrollToAnchor',  get_stylesheet_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );
}
}
add_action( 'wp_footer', 'smoothscrollfaqs' );

smoothscroll.js

	jQuery(function() {
 
  // scroll handler
  var scrollToAnchor = function( id ) {
 
    // grab the element to scroll to based on the name
    var elem = jQuery("a[name='"+ id +"']");
 
    // if that didn't work, look for an element with our ID
    if ( typeof( elem.offset() ) === "undefined" ) {
      elem = jQuery("#"+id);
    }
 
    // if the destination element exists
    if ( typeof( elem.offset() ) !== "undefined" ) {
 
      // do the scroll
      jQuery('html, body').animate({
              scrollTop: elem.offset().top
      }, 1000 );
 
    }
  };
 
  // bind to click event
  jQuery("a").click(function( event ) {
 
    // only do this if it's an anchor link
    if ( jQuery(this).attr("href").match("#") ) {
 
      // cancel default event propagation
      event.preventDefault();
 
      // scroll to the location
      var href = jQuery(this).attr('href').replace('#', '')
      scrollToAnchor( href );
 
    }
 
  });
 
});
//updated by James Pederson

Greetings

I was working with a client recently who wanted to implement a "Smooth Scrolling" function for anchor tags on their FAQs page. I saw a lot of material on how to add a "back to top" link/button that would work universally across the site, but I had a hard time finding anything for implementing smooth scrolling for a single page. So I "borrowed" other great developers ideas and put something together based on my knowledge of Wordpress, PHP, jQuery etc.

I am no jQuery expert - this code works great on WordPress 4.5 for me, but with updates being released all the time it may need updating/tweaking. Feel free to add, edit, request anything that seems out of place. I am happy to hear your critiques and improve this.

INSTRUCTIONS:

• Hopefully you are working with a child theme, but if not - do that first, as always ( click here ).
• Depending on the theme you are using, default or premium, your child theme may already have a custom js folder in the theme directory most likely titled "js" (go figure). If this folder doesn't exist, go ahead and create it and upload it through FTP/SFTP.
• Next upload the file smoothscroll.js to your "js" folder. Now that the jQuery is uploaded to your server we are ready to enqueue it into your active theme.
• Enqueueing properly depends on a few factors of course! Namely the specified 'path' you are requesting the functions.php file to find our wonderful bit of jQuery. What I have should be relative enough but you may need to adjust this based on your theme setup.
• Now for the conditional tag - as mentioned above I wanted this function to only be enacted on the client's "FAQs" page only. You may have something else in mind. Just replace my conditional tag specification with your own. There are plenty to choose from.
• After adjusting the conditional tag, copy and paste the code commented above as //ENQUEUE JQUERY SMOOTH SCROLL into you functions.php and upload it through FTP.

-Check the console for errors - but you should be ready to start seeing some smooth scrolling on your anchor tags

CREDITS:

The enqueuing was adapted from wpbeginner

The smoothscroll.js was adapted in part from Brad S. Knutson