• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом

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

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

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

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

Pen

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

<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);
    })
});

Код 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);
}

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

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

See the Pen

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

<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-эффектом. Сделано очень качественно и креативно. Редко когда можно встретить подобный элемент с творческим подходом.

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

1427 просмотров