1

I have a menu which has links like the following

https://examples.com/#about-us
https://examples.com/#our-team
https://examples.com/#testimony
https://examples.com/#career
https://examples.com/#contact-us

I have a single page app and want to apply smooth scrolling there.

I googled a little and found that:

The generate_smooth_scroll_elements allow you to initiate smooth scroll on other element classes instead of just ones with the smooth-scroll class.

Use the following PHP snippet to apply smooth scroll to all hash links:

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'a[href*="#"]';
  
  return $elements;
} );

I want to smooth scroll to particular classes only.

How to apply particular class and smooth scroll there using gutenberg block editor.

Ahmad Ismail
  • 11,636
  • 6
  • 52
  • 87
  • You're asking about Gutenberg (which is js-based) and providing a PHP-example ) that won't work. – Paul Mitchell Mar 15 '21 at 06:20
  • 2
    Could be done with a little help from Javascript, lots of question like this: https://stackoverflow.com/questions/17722497/scroll-smoothly-to-specific-element-on-page – Paul Mitchell Mar 15 '21 at 06:25
  • I am actually new to wordpress so not sure what can or can not be done. If I need html, css or javascript then it is also ok. – Ahmad Ismail Mar 15 '21 at 06:29
  • If you need help with html, js, css or php you're not new to Wordpress, you're just new to dev. Plenty of usefull stuff on youtube i'm sure. – amarinediary Mar 15 '21 at 07:19
  • check out this article, for example https://webdesign.tutsplus.com/tutorials/smooth-scrolling-vanilla-javascript--cms-35165 – Paul Mitchell Mar 15 '21 at 07:46

1 Answers1

2

Here, try this little plugin that does just that. However, you should specify smooth scroll links yourself by adding "smooth-scroll" class to them like this: <a href="#test" class="smooth_scroll" data-type="internal" data-id="#test">Smooth Scroll Link</a>

<?php
/**
 * Plugin Name: Native Smooth Scroll
 * Plugin URI:
 * Description: Simple plugin for smooth scroll to anchors using native JS scrollIntoView() method.
 * Author: Paul Fedorov
 * Author URI: https://github.com/acerus
 * Requires at least: 5.0
 * Tested up to: 5.4
 * Version: 1.0
 * Stable tag: 1.0
 *
 * Text Domain: native-smooth-scroll
 * Domain Path: /languages/
 *
 */

function enqueue_scripts() { ?>

  <script>

  const smooth_links = document.querySelectorAll('a.smooth_scroll[href^="#"]');

  for (const link of smooth_links) {
    link.addEventListener("click", clickHandler);
  }

  function clickHandler (event) {
    event.preventDefault();
    const href = this.getAttribute("href");

    document.querySelector(href).scrollIntoView({
      behavior: "smooth"
    });
  }

  </script>

<?php }

add_action('wp_footer', 'enqueue_scripts');

I assume you use generatepress theme so better add any custom functionality with plugins and don't alter the theme itself so you won't lose anything after updating the theme.

Paul Mitchell
  • 144
  • 6