Как сделать кнопку вверх без плагина

Я не люблю нагружать сайт плагинами без особой необходимости и стараюсь решать задачи вставкой нужного кода. Вот пример простой кнопки “Вверх” которую можно использовать без установки плагина.

HTML-код

Этот код я разместил в конце файла footer.php

				
					<button type="button" class="scrolltop js-scrolltop"><?php echo __('Наверх','textdomain'); ?></button>

СSS

				
					.scrolltop {
    display: none;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    padding: 20px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    border: none;
    background: #009072;
    text-align: center;
    z-index: 2;
    border-radius: 5px;
    cursor: pointer;
}

jQuery

Этот код я также разместил в конце файла footer.php, хотя можно создать отдельный js файл и подключить его в functions.php

				
					<script type="text/javascript">
    jQuery(function($) {
        
        $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('.scrolltop').show('slow');
        } else {
            $('.scrolltop').hide('slow');
        }
    });

        var $scroll_btn = $(".js-scrolltop");

        $scroll_btn.click(function() {
            return $("body,html").animate({
                scrollTop: 0
            }, 500);
        });
    });
</script>

Если у Вас есть какие-либо вопросы, оставьте свой комментарий:

Как сделать кнопку вверх без плагина

Добавить комментарий Отменить ответ