Как сделать плавный скролл га якорь WP?

Ссылка скопирована
JavaScript
1 ответ

Плавный скролл сделан через JS:

$('.navmenu a').on('click', function() {   let href = $(this).attr('href');   $('html, body').animate({     scrollTop: $(href).offset().top   }, {     duration: 800,     easing: "linear"   });   return false; });

$('.navmenu a').on('click', function() { let href = $(this).attr('href'); $('html, body').animate({ scrollTop: $(href).offset().top }, { duration: 800, easing: "linear" }); return false; });

При формате ссылок меню #ssylka - плавный скролл работает, но тогда якоря не срабатывают при переходе с других страниц.

Если указать ссылке меню в формате /#ssylka - то наоборот срабатывают якоря, но не работает плавный скролл.

Как сделать так, чтобы работали и якоря при переходе с других страниц и плавный скролл?

Дополнительно:

потому что после перехода на другую страницу твой скрипт уже не работает

  • https://developer.mozilla.org/en-US/docs/Web/CSS/s...

    • можно в стилях html/body добавить
    scroll-behavior: smooth;

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Артём Dev Ответ

    Для того чтобы реализовать плавный скролл к якорю на странице WordPress, вам понадобится добавить некоторый JavaScript код. Вот пример того, как это можно сделать:

    1. Добавьте следующий скрипт в файл functions.php вашей темы:

    function smooth_scroll_to_anchor() {
    wp_enqueue_script('smooth-scroll', get_template_directory_uri() . '/js/smooth-scroll.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'smooth_scroll_to_anchor');

    function smooth_scroll_to_anchor() { wp_enqueue_script('smooth-scroll', get_template_directory_uri() . '/js/smooth-scroll.js', array('jquery'), '1.0', true); } add_action('wp_enqueue_scripts', 'smooth_scroll_to_anchor');

    2. Создайте файл smooth-scroll.js в папке js вашей темы и добавьте в него следующий код:

    jQuery(document).ready(function($) {
    $('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000, function() {
                    var $target = $(target);
                    $target.focus();
                    if ($target.is(":focus")) {
                        return false;
                    } else {
                        $target.attr('tabindex','-1');
                        $target.focus();
                    };
                });
            }
        }
    });
});

    jQuery(document).ready(function($) { $('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { var $target = $(target); $target.focus(); if ($target.is(":focus")) { return false; } else { $target.attr('tabindex','-1'); $target.focus(); }; }); } } }); });

    3. Теперь вы можете использовать якори на вашей странице, например:

    ```html
    Перейти к разделу 1
    ...

    Содержимое раздела 1

    ```

    После выполнения этих шагов, при клике на ссылку с якорем, страница будет плавно скроллиться к соответствующему разделу. Не забудьте подключить smooth-scroll.js в вашу тему и изменить пути к файлам, если это необходимо.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ