+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Кнопка наверх для сайта / Появляющаяся ссылка "наверх"

Делаем простую, но полезную штуку. На многих сайтах, Вы видели, что по мере прокрутки страницы вниз, где-то вверху или внизу появляется небольшой блок с надписью "Наверх". Как его сделать?

Нам понадобится библиотека JavaScript JQuery. Подключаем
<script type="text/javascript" src="jquery.js"></script>
Собственно сама ссылочка
<a id="move_up" href="#" style="display:none; ">наверх</a>
Под ней вот такой код JavaScript
<script type="text/javascript">
$(function()
{
$(window).scroll(function()
{
if($(this).scrollTop()>100) $('a#move_up').fadeIn();
else $('a#move_up').fadeOut(400);
});
$('a#move_up').click(function(){
$('body,html').animate({scrollTop: 0}, 450);
return false;
});
});
</script>
И код css
a#move_up{
position:fixed; /* фиксированное положение блока*/
top:8px;
right:20px;
width:56px;
height:20px;
display:none;
text-align:center;
font:12px Arial,Verdana,sans-serif;
color:#fff;
background:#3366ff;
padding-top:5px;
/*прозрачность*/
opacity:0.7;
filter:alpha(opacity=70);
border-radius: 2px;
text-decoration:none;}

a#move_up:hover{
opacity:0.9;
filter: alpha(opacity=90);}
Готово, радуемся.


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 2554