one-click-accessibility/modules/core/components/skip-link.php

<?php

namespace EA11y\Modules\Core\Components;

use EA11y\Modules\Settings\Classes\Settings;

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

class Skip_Link {
    private $settings;

    public function get_name(): string {
        return 'skip-link';
    }

    public function enqueue_skip_link_styles() {
        wp_enqueue_style(
            'ea11y-skip-link',
            EA11Y_ASSETS_URL . '/css/skip-link.css',
            [],
            EA11Y_VERSION
        );
    }

    public function render_skip_link() {
        ?>
      <script>
        const onSkipLinkClick = () => {
          const htmlElement = document.querySelector('html');

          htmlElement.style['scroll-behavior'] = 'smooth';

          setTimeout( () => htmlElement.style['scroll-behavior'] = null, 1000 );
        }
      </script>

        <a class="ea11y-skip-to-content-link"
           href="<?php echo esc_url( $this->settings['anchor'] );?>"
           tabindex="1"
           onclick="onSkipLinkClick()">
            <?php esc_attr_e('Skip to content', 'pojo-accessibility') ?>

            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M18 6V12C18 12.7956 17.6839 13.5587 17.1213 14.1213C16.5587 14.6839 15.7956 15 15 15H5M5 15L9 11M5 15L9 19"
                      stroke="black"
                      stroke-width="1.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"/>
            </svg>
        </a>

        <div class="ea11y-skip-to-content-backdrop"></div>
        <?php
    }

    /**
     * Module constructor.
     */
    public function __construct() {
        $this->settings = get_option( Settings::SKIP_TO_CONTENT );

        if ($this->settings && ! empty( $this->settings['enabled'] )) {
            remove_action( 'wp_footer', 'the_block_template_skip_link' );

            add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_skip_link_styles' ] );
            add_action( 'wp_head', [ $this, 'render_skip_link' ] );
        }
    }
}