Кнопка прокрутка вверх: 5 разных вариантов и стилей

01.03.2017 weatherless JavaScript » Разное на JavaScript » #650

Трудно представить современный сайт без кнопки «Вверх». Всегда необходимо предоставлять пользователю «прыгнуть» к началу страницы. Пять неплохих примеров у нас в посте.

Все приведенные варианты будут использовать библиотеку jQuery, поскольку она с легкостью предоставляет свой UI функционал в этом направлении. Мы рассмотрим разные стили кнопок, эффекты прокрутки, а также параллельно предложим боковую и горизонтальную навигацию по странице. Поехали!

1. Начнем с самого простого примера, где нет замысловатых скриптов и оформления:

Pen

Из всего кода Вам потребуется следующий HTML-тег. Измените его под себя при необходимости.

<a href="#" class="go-top">Go Top</a>

1	<a href="#" class="go-top">Go Top</a>

Наш JavaScript будет относительно похож на все остальные

$(document).ready(function() {
    // Отображать или скрывать при прокрутке
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('.go-top').fadeIn(200);
        } else {
            $('.go-top').fadeOut(200);
        }
    });

    // Анимация прокрутки вверх
    $('.go-top').click(function(event) {
        event.preventDefault();

        $('html, body').animate({
            scrollTop: 0
        }, 300);
    })
});

$(document).ready(function() {

// Отображать или скрывать при прокрутке

$(window).scroll(function() {

if ($(this).scrollTop() > 200) {

$('.go-top').fadeIn(200);

} else {

$('.go-top').fadeOut(200);

}

});

// Анимация прокрутки вверх

$('.go-top').click(function(event) {

event.preventDefault();

$('html, body').animate({

scrollTop: 0

}, 300);

})

});

Код CSS для кнопки

.go-top {
	position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	color: white;
	background-color: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	padding: 1em;
	display: none;
}

.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

.go-top {

position: fixed;

bottom: 2em;

right: 2em;

text-decoration: none;

color: white;

background-color: rgba(0, 0, 0, 0.3);

font-size: 12px;

padding: 1em;

display: none;

}

.go-top:hover {

background-color: rgba(0, 0, 0, 0.6);

}

По сути, если Вам нужна обычная кнопка, то просто скопируйте приведенный выше код в свой проект. Дальнейшие примеры будут приводиться без вставок код, Вы сможете скопировать напрямую из CodePen фрейма.

2. Еще один пример с простым использование, но уже с другим оформлением кнопки:

See the Pen

Из HTML структуры Вам понадобиться эта строка

<a href="#0" class="cd-top">Top</a>

1	<a href="#0" class="cd-top">Top</a>

3. Дальше идет пример поинтереснее. В нем присутствует похожая кнопка «вверх», но уже слева можно наблюдать вертикальную навигацию по определенным разделам:

See the Pen

Данный пример не является универсальным и имеет один минус – при создании новых секций\кнопок Вам необходимо отдельно прописывать это в скрипте. Подойдет для небольшой навигации по заранее известным разделам.

4. Следующая наработка более продвинута в плане навигации. Все та же кнопка «вверх» и уже горизонтальная навигация по странице.

See the Pen

Здесь Вам достаточно отметить раздел определенным идентификатором, например, ~~id=»sec01″~~ и повесить ссылку типа ~~href=»#sec01″~~. Теперь при нажатии на нее скрипт будет крутить страницу до нужного раздела. Кстати, здесь присутствует еще и прогресс-бар, отмечающий пункт меню «активным».

5. Ну и напоследок мы оставили самый интересный вариант с кастомным эффектом прокрутки.

See the Pen

При клике на стрелочку, пользователь перемещается вверх страницы с bounce-эффектом. Сделано очень качественно и креативно. Редко когда можно встретить подобный элемент с творческим подходом.

На этом все! Если Вам нужна простая и без лишних скриптов кнопка прокрутка вверх, то воспользуйтесь первым вариантом. Экспериментируйте!