StarDoc30 19.12.2023 17:11

Как добавить кнопку 'Вверх' для плавной прокрутки страницы в WordPress?

Привет, У меня возникла проблема с добавлением кнопки "Вверх" для плавной прокрутки страницы в WordPress. Я хочу, чтобы пользователи могли легко вернуться в начало страницы одним нажатием. Я пробовал использовать различные подходы, но ни один из них не работает должным образом. Вот пример кода, который я использовал: 

// CSS
.button-up {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    cursor: pointer;
    z-index: 9999;
}

// JavaScript
jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('.button-up').fadeIn();
        } else {
            $('.button-up').fadeOut();
        }
    });

    $('.button-up').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 1000);
        return false;
    });
});
Проблема заключается в том, что кнопка "Вверх" не отображается изначально, а появляется только после прокрутки страницы. Кроме того, при нажатии на кнопку, страница не плавно прокручивается вверх, а мгновенно переходит в начало. Я был бы очень благодарен, если вы могли бы помочь мне исправить эту проблему. Что я делаю не так? Как можно реализовать плавную прокрутку и отображение кнопки "Вверх" с самого начала? Спасибо большое!

Ответы:

Tanya27Volunteer 19.12.2023 17:34
Вы можете попробовать добавить стили и скрипт прямо в шаблон страницы, вместо использования отдельного файла. Также, проверьте, что у вас правильно подключена библиотека jQuery.
SeverinaSol20 19.12.2023 17:45
Добавьте класс .button-up в стили и задайте ему изначальное значение display: block, чтобы кнопка "Вверх" отображалась с самого начала. Также, используйте функцию animate() с параметром easing: 'swing', чтобы реализовать плавную прокрутку страницы при нажатии на кнопку.
SofiaFomina1986 19.12.2023 17:53
Вы можете исправить эту проблему, добавив стили и скрипты в заголовок страницы или с помощью плагина для создания кнопки "Вверх" с плавной прокруткой.
AmbitiousWorker20 19.12.2023 18:11
Проблема с отображением кнопки "Вверх" изначально и неплавной прокруткой страницы вызвана несколькими ошибками в коде, которые я могу помочь исправить. 1. Отображение кнопки "Вверх" изначально: Проблема заключается в том, что вы настроили кнопку на скрытие с помощью CSS. Для того чтобы кнопка отображалась изначально, вам нужно изменить значение свойства "display" на "block". Исправленный код CSS будет выглядеть так: 

.button-up {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    cursor: pointer;
    z-index: 9999;
}
2. Плавная прокрутка страницы: Проблема с неплавной прокруткой страницы вызвана неправильным использованием анимации в jQuery. Вам необходимо добавить подключение плагина jQuery Easing для достижения плавной прокрутки. Вы можете добавить следующую строку кода перед вашим JavaScript кодом:
Затем, вам нужно изменить код JavaScript для использования плагина jQuery Easing. Исправленный код JavaScript будет выглядеть так: 

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('.button-up').fadeIn();
        } else {
            $('.button-up').fadeOut();
        }
    });

    $('.button-up').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 1000, 'easeInOutExpo');
        return false;
    });
});
Теперь с помощью плагина jQuery Easing вы сможете достичь плавной прокрутки страницы при нажатии на кнопку "Вверх". Я надеюсь, что эти исправления помогут вам решить вашу проблему с кнопкой "Вверх" в WordPress. Если у вас возникнут еще вопросы, не стесняйтесь задавать их! Удачи!

Добавить ответ