Кнопка вверх для сайта

Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. (Реализованно на данном сайте). Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки. 

Мы выбрали данную кнопку потому, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

 

HTML код:

Для вызова кнопки после основного контента страницы или перед тегом </body> разместите следующий HTML код:

<a href="#" class="scrollup">Наверх</a>

CSS стили:

.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
backgroundurl('icon_top.png'no-repeat;
}

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и  50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

JQuery:

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>...</head>? вставляем следующее:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Затем сразу после подключения библиотеки необходимо расположить следующий  код JQuery:

<script type="text/javascript">
$(document).ready(function(){
 
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
else {
$('.scrollup').fadeOut();
}
});
 
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
 
});
</script>

Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение. 

Как вы видите есть еще два параметра - 0 - значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 - это скорость анимации в миллисекундах.

Наши работы