moyaimperiya45 11.02.2023 13:22

Как добавить кнопку "Прокрутить вверх" при прокрутке страницы в WordPress?

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

Можете ли вы помочь мне с этим? Вот пример кода, который я использовала:

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.scroll-to-top').fadeIn();
        } else {
            $('.scroll-to-top').fadeOut();
        }
    });
 
    $('.scroll-to-top').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 800);
        return false;
    });
});

Я также добавила HTML-код для кнопки:

<a href="#" class="scroll-to-top">Прокрутить вверх</a>

Буду благодарна за любую помощь. Спасибо!

Ответы:

DrP3t3r89 11.02.2023 13:26
Добавьте проверку наличия библиотеки jQuery перед использованием.
renatkozlov1991 11.02.2023 13:34
Я понимаю твою проблему и готов помочь. Видимо, код, который ты использовала, не работает из-за нескольких причин. Вот несколько возможных причин и способы решения проблемы: 1. Проверь, правильно ли подключен jQuery на твоем сайте. Убедись, что ты добавила следующую строку перед кодом JavaScript: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2. Убедись, что ты правильно добавила CSS для кнопки "Прокрутить вверх". Проверь, что у тебя есть класс "scroll-to-top" в CSS, который определяет стиль и положение кнопки. Пример CSS-кода может выглядеть так: 
.scroll-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #000;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
}
3. Убедись, что ты правильно добавила HTML-код для кнопки на своей странице. Убедись, что у кнопки есть правильный класс "scroll-to-top" и указан правильный текст для кнопки. Пример HTML-кода может выглядеть так: 
<a href="#" class="scroll-to-top">Прокрутить вверх</a>
Если ты проверила все эти вещи и код все равно не работает, то возможно, есть другие проблемы на твоем сайте. Здесь есть несколько дополнительных вариантов решения: 1. Проверь, нет ли конфликтов с другими плагинами или скриптами на твоем сайте. Попробуй временно отключить все плагины и удалить все другие скрипты, кроме jQuery и кода кнопки "Прокрутить вверх", чтобы убедиться, что проблема не вызвана внешними факторами. 2. Проверь консоль разработчика в браузере, чтобы увидеть возможные ошибки JavaScript. Открой страницу с прокруткой вниз и посмотри, нет ли ошибок в консоли разработчика. Если есть, исправь их в соответствии с сообщениями об ошибках. Вот пример кода, который должен работать для создания кнопки "Прокрутить вверх" после прокрутки страницы: 
jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $('.scroll-to-top').fadeIn();
        } else {
            $('.scroll-to-top').fadeOut();
        }
    });

    $('.scroll-to-top').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 800);
        return false;
    });
});
Я надеюсь, что эти советы помогут тебе решить проблему с кнопкой "Прокрутить вверх" на твоей WordPress-странице. Если у тебя возникнут еще вопросы, не стесняйся спрашивать! Удачи!
reginavol35 11.02.2023 13:47

Проблема, с которой вы столкнулись, весьма распространена при создании кнопки "Прокрутить вверх" на странице WordPress. Однако, решение этой проблемы довольно простое.

Ваш код выглядит правильным, но, возможно, у вас пропущено добавление CSS-класса для кнопки "Прокрутить вверх". Убедитесь, что CSS-класс указан правильно в вашем коде и в HTML-коде для кнопки.

Кроме того, убедитесь, что вы правильно подключили библиотеку jQuery в вашей теме WordPress. Это можно сделать, добавив следующий код в файл functions.php вашей темы:

function include_jquery() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', includes_url('/js/jquery/jquery.js'), array(), null, true);
}
add_action('wp_enqueue_scripts', 'include_jquery');

Помимо этого, проверьте, что ваша кнопка "Прокрутить вверх" имеет правильные стили CSS, такие как позиционирование, размер и цвет фона. Это можно сделать в файле стилей вашей темы (style.css) или добавить инлайновые стили в HTML-код вашей кнопки.

Вот пример CSS-стилей для кнопки "Прокрутить вверх":

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #555;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    display: none;
}

Убедитесь, что в вашем коде и HTML-коде для кнопки используется правильный CSS-класс.

Если все эти шаги выполнены правильно, ваш код должен работать. Кнопка "Прокрутить вверх" должна появиться после прокрутки страницы вниз на расстояние больше 100 пикселей, и при клике на нее страница должна плавно прокрутиться вверх.

Я надеюсь, что эти рекомендации помогут вам решить проблему! Если у вас возникнут еще вопросы, не стесняйтесь задавать их.

Удачи вам!

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