Как сделать кнопку наверх?

Question

[Michael Tsaruk]

Доброго времени суток, подскажите пожалуйста как сделать кнопку вверх которая доходит к верху футера и прилипает, а когда скролл происходить в обратную сторону то отлипает, и пристает к низу экрана. Заранее благодарен!

Answer 1

[Руслан Гильфанов]

Допустим, страница поделена на три блока: header, main и footer.

Тогда, кнопка "наверх" должна быть последним элементом внутри main.

<header>
    <p>Хедер</p>
</header>
<main>
    <p>Пример контента</p>
    <a id="page_up_down_button" href="#">Наверх</a>
</main>
<footer>
    <p>Футер</p>
</footer>

В CSS, кнопке можно прописать:

#page_up_down_button {
    position: sticky;
    bottom: 0;
}

Ну и соответствующие стили, чтобы имитировать кнопку.

Пример скрипта с использованием JQuery, чтобы кнопка могла возвращать не только наверх, но и на место откуда ею воспользовались:

<script type="text/javascript">
    var scroll_position = null;

    $('#page_up_down_button').click(function(){
        if ($(document).scrollTop() > 0) {
            scroll_position = $(document).scrollTop();
            $('#page_up_down_button').html('Обратно');
            return true;
        } else if (scroll_position > $(document).scrollTop()) {
            $(document).scrollTop(scroll_position);
            $('#page_up_down_button').html('Наверх');
            return false;
        };
    });

    function check_status_button(){
        if ($(document).scrollTop() > 0) {
            scroll_position = null;
            $('#page_up_down_button').html('Наверх');
        };
    };

    $(window).resize(function() {
        check_status_button();
    });

    $(window).scroll(function() {
        check_status_button();
    });
</script>

Скрипт лучше размещать ниже кнопки.

Для работы кнопки, естественно нужно подключить JQuery до скрипта, а лучше в head страницы.

Например, так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>