Кнопка прокрутки обратно наверх с помощью jQuery

Хотя это доволи часто встречающаяся задача и как правило большинство WordPress тем уже поддерживают этот функционал, но будет не лишним разобраться.

В теге <head> подключаем библиотеку jQuery и Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

В футер поместим код кнопки:

<p id="back-top">
    <a href="#top"><i class="fa fa-angle-double-up"></i></a>
</p>

Добавим стилей:

#back-top {
    position: fixed;
    bottom: 20px;
    right: 30px;
}
#back-top a {
    padding: 4px 10px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: 1s;
    background: #f4f4f4;
    border: 1px solid #ccc;
    font-size: 26px;
}
#back-top a:hover {
    color: #000;
    text-decoration: none;
}

Теперь осталось добавить JavaScript код. Добавленны комментарии чтобы было понятно что происходит в коде:

$(document).ready(function(){
    $("#back-top").hide();
    $(function () {
        // Show/hide button
        $(window).scroll(function () {
            // If scroll down more then 100px
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // Animate scroll to top
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

Финальная версия:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Back to top button</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <style>
        #back-top {
            position: fixed;
            bottom: 20px;
            right: 30px;
        }
        #back-top a {
            padding: 4px 10px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            transition: 1s;
            background: #f4f4f4;
            border: 1px solid #ccc;
            font-size: 26px;
        }
        #back-top a:hover {
            color: #000;
            text-decoration: none;
        }
    </style>
</head>
<body>

<h1>Back to top button</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quos modi in tenetur vero voluptatum sapiente dolores eligendi nemo iste. Odio, omnis enim sint quam, dolorum dolorem illum nemo officiis nostrum, minus ad officia! Ullam, saepe corporis hic, error, qui delectus porro quis mollitia provident et perferendis aliquid officia vitae!</p>

....

<p id="back-top">
    <a href="#top"><i class="fa fa-angle-double-up"></i></a>
</p>
<script>
    $(document).ready(function(){
        $("#back-top").hide();
        $(function () {
            // Show/hide button
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('#back-top').fadeIn();
                } else {
                    $('#back-top').fadeOut();
                }
            });
            // Animate scroll to top
            $('#back-top a').click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });
    });
</script>
</body>
</html>
Отправить

Похожие посты


Владимир Камуз

Фрилансер Full Stack WordPress разработчик из Украины. Работаю в основном на международной бирже фриланса Upwork.

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

Email рассылка

Еженедельный дайджест последних добавленных обучающих материалов. Подпишитесь на Email рассылку, чтобы не пропустить полезную информацию о фрилансе на Upwork и веб-разработке.