Как добавить плавный скролл к якорным ссылкам на WordPress?

Как обеспечить работоспособность якорей при переходе с других страниц и одновременно активировать плавный скролл при клике на ссылки меню?
  • 21 января 2024 г. 9:28
Ответы на вопрос 2
Чтобы добавить плавный скролл (smooth scroll) к якорным ссылкам на сайте WordPress, можно использовать как плагины, так и добавить соответствующий код в JavaScript. Ниже я опишу, как это сделать двумя основными способами.

### Использование плагина:
1. Установите и активируйте плагин, который добавляет плавный скролл, например, "Smooth Scroll Up" или "Page scroll to id".
2. Настройте плагин в соответствии с вашими требованиями (например, скорость скроллинга, отключение на мобильных устройствах и т.д.).

### Добавление кода JavaScript:
Если вы предпочитаете не использовать плагины, вы можете добавить следующий JavaScript код для активации плавного скролла. Этот код можно добавить в файл `functions.php` вашей темы или создать пользовательский плагин.

```php
function add_smooth_scroll() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        // Добавление плавного скроллинга к якорным ссылкам
        $('a[href*="#"]:not([href="#"])').click(function() {
            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) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000); // 1000 - это время анимации в миллисекундах
                    return false;
                }
            }
        });

        // Дополнительный код для скролла при загрузке страницы с якорем
        if(window.location.hash) {
            var target = $(window.location.hash);
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
            }
        }
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_smooth_scroll');
```

В функции `add_smooth_scroll()` содержится JavaScript код, который инициализирует плавный скролл в тех случаях, когда пользователь кликает на якорную ссылку (ссылку, содержащую символ `#`). Если на страницу осуществляется переход с другой страницы по такой ссылке, то скролл к якорю также будет плавным при загрузке.

**Важно!** Когда вы вносите изменения в файл `functions.php`, будьте осторожны, так как ошибки в коде могут вызвать сбой работы вашего сайта. Рекомендуется сделать резервную копию файла перед внесением изменений или использовать дочернюю тему (child theme) для безопасного добавления кастомного кода.

После внесения изменений, очистите кеш (если он используется на вашем сайте), чтобы убедиться, что новый скрипт загружается при запросах к странице.
можно в стилях html/body добавить 
scroll-behavior: smooth;
Похожие вопросы