如何使用 Gutenberg 应用平滑滚动

Question

我有一个包含如下链接的菜单

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

我有一个单页应用，想在那里应用平滑滚动。

我用谷歌搜索了一下，found：

generate_smooth_scroll_elements让你启动流畅 在其他元素类上滚动，而不仅仅是带有 smooth-scroll 班级。

使用以下 PHP sn-p 将平滑滚动应用于所有哈希 链接：

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

我只想平滑滚动到特定的类。

如何使用古腾堡块编辑器应用特定的类并在那里平滑滚动。

Answer 1

在这里，试试这个小插件。但是，您应该自己指定平滑滚动链接，方法是向它们添加“平滑滚动”类，如下所示：<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');

我假设您使用 generatepress 主题，因此最好使用插件添加任何自定义功能，并且不要更改主题本身，这样您就不会在更新主题后丢失任何内容。