Прокрутка страницы вверх вниз

Прокрутка страницы вверх вниз

Как сделать кнопку прокрутки страницы вверх на jQuery? Простой и красивый способ прокрутить страницу вверх, это использовать HTML + CSS + jQuery

Скрипт плавной прокрутки страницы сайта вверх на HTML + CSS + jQuery

Нередко бывает удобно воспользоваться кнопкой прокрутки страницы вверх, когда находишься в средней или нижней части страницы. Данную возможность можно реализовать посредством HTML и CSS, однако в данном случае, пользователь будет перемещен в верхнюю часть страницы моментально (скачкообразно) и зрительно это будет выглядеть не совсем красиво. jQuery позволит нам задать плавность перемещения, избежав скачков перемещения от нижней части страницы к верхней.

Изначально сама кнопка прокрутки страницы вверх будет отсутствовать, чтобы не занимать место на странице, а появляться она будет лишь при прокрутке страницы вниз на определённое количество пикселей.

Функионал работы плавной прокртуки страницы вверх в мобильной версии также доступен.

У посетителя сайта, должна быть возможность, быстро вернуться наверх, если он дошел до конца страницы. Обычно в правом нижнем углу браузера, размещается кнопка со стрелочкой вверх. Пользователь нажимает на стрелочку и скрипт перебрасывает его наверх. Сделаем кнопку средствами CSS и запрограммируем её на jQuery.

Кнопка наверх

Вставьте внизу HTML страницы тег button с классом scroll_top.

Приступим к стилизации этого тега. Нарисуем фигуру круга, внутри которого при помощи псевдоэлемента after, нарисуем стрелочку.

Как нарисовать стрелочку?

Представьте себе пустой квадрат с цветной обводкой сверху и слева, если его повернуть на 45 градусов, то обводка превратиться в стрелочку вверх.

/* основа кнопки вверх */
.scroll_top <
position: fixed; /* фиксированное положение */
bottom: -50px; /* расстояние от нижнего края */
right: 20px; /* расстояние от правого края */
width: 50px; /* ширина */
height: 50px; /* высота */
border: none; /* без рамки */
border-radius: 50%; /* фигура круга */
background: #ff0000;/* цвет фона */
z-index: 100; /* поверх остальных элементов */
outline: none; /* без внешней обводки */
cursor: pointer;/* курсор рука */
transition: 0.4s; /* плавное движение */
>

Читайте также:  Космические рейнджеры 2 elementar games квест

/* стрелочка внутри кнопки вверх */
.scroll_top:after <
content: "";
width: 12px;
height: 12px;
border-top: 2px solid #fff; /* верхняя рамка */
border-left: 2px solid #fff; /* левая рамка */
transform: rotate(45deg); /* поворот */
position: absolute; /* положение относительно круга */
top: 7px;
bottom: 0;
left: 0;
right: 0;
margin: auto; /* выравнивание по центру */
>

Программирование кнопки

Кнопка появилась, но при клике по ней ничего не происходит. Нам предстоит написать функцию со следующим алгоритмом действий.

Только что написанная нами функция работает, но есть один недостаток. Пользователь сразу видит кнопочку вверх, как только попадает на сайт. Было бы неплохо, показывать ему кнопку, не на первом экране, а ниже, например через 300 пикселей от верха браузера.

Что нужно делать?

/* кнопка появится */
.scroll_top.active <
bottom: 20px;
>

Если окно браузера больше, чем 300 пикселей, то следует добавить элементу scroll_top активный класс, то есть перезаписать его нижнюю позицию (показать кнопку). В противном случае, удалить активный класс (спрятать кнопку).

$(window).scroll(function() <
if($(window).scrollTop() > 300) <
$(‘.scroll_top’).addClass(‘active’);
>
else <
$(‘.scroll_top’).removeClass(‘active’);
>
>);

Не забудьте подключить библиотеку jQuery.

Демонстрация примера

Заключение

Если вы уже изучили HTML/CSS и не знаете куда двигаться дальше, то рекомендую вам пройти мой видео-курс, без умения программировать хотя бы на jQuery, вы будете вынуждены, отдавать часть заработка какому-нибудь программисту.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Читайте также:  Основа это часть изменяемого слова без окончания

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция animate.

    .animate(properties, duration, easing, complete);

    • properties – свойства, к которым будет применятся анимация;
    • duration – время анимации, мс;
    • easing – метод анимации, по умолчанию swing замедление в начале и конце или linear постоянная скорость;
    • complete – функция, вызываемая после завершения анимации.

    Кнопка «Вниз»

    Стационарная ссылка или кнопка для прокрутки страницы в самый низ.

    Ссылка на основную публикацию
    При каком альфа векторы компланарны
    Единого обозначения компланарность не имеет. Свойства компланарности Пусть — векторы пространства . Тогда верны следующие утверждения: Если хотя бы один...
    Нет msvcr120 dll что делать
    Если, попытавшись включить любимую игру, вы натыкаетесь на окно, которое гласит, что запуск программы невозможен по причине отсутствия mscvr120.dll —...
    Нет беспроводного сетевого соединения windows 7
    На панели задач в Windows или в меню «Центр управление сетями» нет иконки Wi-Fi? Это не значит, что вышло из...
    При каком значении m прямая параллельна плоскости
    Точка C(—3, 4,1) найдена. 6. Написать уравнение плоскости, проходящей через точки M1(1, —2, 1), M2(4, 2, 3) и параллельной вектору...
    Adblock detector