На любом сайте, где достаточно много контента, нужна быстрая прокрутка, иначе попросту неудобно мотать до самого верха колесиком мышки или пользоваться боковым скроллом. Для этих целей существуют кнопки "вверх". При прокрутке страницы вниз кнопка сама плавно появляется в правом нижнем углу. Поле нажатия на кнопку страница плавно перелистывается вверх.
Приступим к установке: Для начала в нижнюю часть сайта вставим этот JS код
Код
// кнопка вверх
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$(".top_up").scrollToTop();
});
Теперь пропишем стили CSS
Код
/* стили кнопки вверх -----*/
.top_up { color:#F2F2F2; text-shadow:0 1px 1px #101010; cursor: pointer; position:fixed; bottom:-3px; right:50px; background:#7B7B7B; margin: 0px; padding:5px 10px 7px 10px; border:1px solid #525252; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px }
.top_up:hover{ color:#F2F2F2; background:#868686 }
И на последок установим HTML код сразу после тега
Код
<a href="#" class="top_up">Вверх ▲</a>
Демо прикреплять нет никакого смысла, так как на нашем сайте (uc-portaller.ru) установлена именно такая кнопка. На этом все! Оставляйте комментарии и не забывайте следить за обновлениями.
0
