Совсем короткая заметка на тему того, как сделать кнопку «Вверх» для сайта. Логика работы кнопки такова: При клике на нее, пользователя «перекидывает» в самое начало страницы. В том случае, если в браузере пользователя включен javascript (справедливо для абсолютного большинства пользователей) — то переход осуществляется плавно. В противном случае, пользователя перекидывает вверх страницы без эффекта «скольжения». Также стоит заметить, что изначально кнопка не видна, она отображается при прокрутке страницы вниз.
Итак, для создания кнопки создается html-контейнер, содержащий пустую ссылку и какой-нибудь id (в данном случае — это Go_Top). Также, стоит заметить, что в данном случае используется иконка из шрифта font awesome, а не картинка «стрелочки».
<div> <a id="Go_Top" href="#"> <i class="fa fa-arrow-circle-o-up" aria-hidden="true" style="font-size: 30px;"> Наверх </i> </a> </div>
Далее задаем стили для ссылки (позиционирование и проч.):
#Go_Top { display: block; position: fixed; bottom: 70px; right: 50%; cursor: pointer; z-index:3200; }
И, соответственно, маленький кусочек js-кода.
$(function(){ $.fn.scrollToTop=function(){ $(this).hide().removeAttr("href"), $(window).scrollTop()>="250"&&$(this).fadeIn("slow"); var o=$(this); $(window).scroll(function(){ $(window).scrollTop()<="250"?$(o).fadeOut("slow"):$(o).fadeIn("slow") }), $(this).click(function(){$("html, body").animate({scrollTop:0},"slow")}) } }), $(function(){$("#Go_Top").scrollToTop()});
Значение 250 в js-коде — это количество пикселей, при прокрутке которых появляется кнопка «Вверх». Соответственно, это значение следует адаптировать под свои нужны. Нет нужды говорить, что для корректной работы вышеприведенного кода требуется подключенная библиотека jquery на сайте.