Кнопка вернуться наверх страницы на jQuery

Если вы хотите сделать ваш сайт чуть более удобней для посетителей, то пора бы задуматься о кнопке scroll to top, или, как ее еще называют «вернуться наверх страницы». Но, мы ведь хотим не просто олдскульную кнопку с href=»#» 🙂

Как сделать кнопку scroll to top на jQuery

Для начала, определимся, что мы хотим сделать: наша кнопка должна появляться на странице, когда мы доскролим до определенной высоты, а сама анимация должна быть плавной. Пропишите путь к вашей библиотеке jQuery, гугл CDN или физическое расположение на вашем сервере.

В данном примере мы не будем рассматривать подробно CSS кнопки, я уверен вы и так знаете, что блок с фразой «вернуться наверх» или иконкой (что на мой взгляд куда симпатичнее смотрится), должен обязательно иметь position fixed или position absolute.

Рассмотрим сам код нашего файла script.js (который тоже нужно подключить, но только после подключения jQuery):

button-up — класс нашей кнопки, например, можно создать в конце вашего документа div с таким классом. По клику происходит анимация к самому верху страницы, за пол секунды, т.к. в javascript все время указывается в миллисекундах. Для увеличения анимации можно поменять 500 на 1000, но мы даже тут будем экономить 🙂

return false мы пишем только для того, чтобы отменить событие по умолчанию — клик по ссылке с атрибутом href=»#» не будет переходить по ней (в данном случае переход к id на странице).

Как отобразить кнопку на jQuery при прокрутке страницы

Для решения этой задачи сделаем так, чтобы наша кнопка scroll-to-top была скрыта по умолчанию при загрузке страницы. Ваш HTML код должен быть приблизительно следующим (в этот раз рассмотрим именно пример с тегом a, чтобы убедиться в работе return false):

Пишем в CSS:

При загрузке нашей страницы мы не видим эту кнопку. Добавим событие при скролле:

Добавляем функцию при скролле документа и проверяем какая у нас текущая высота, если она больше 800 пикселей, то убираем класс hidden. Со стилями я думаю вы и сами разберетесь. Можно также добавить анимацию плавного появления этой кнопки при помощи CSS3 или немного изменив нашу функцию:

В данном случае нам и класс не понадобился, а какой способ предпочитаете вы? 🙂

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *