Навигация

DataLife Engine v.10.5

Кнопка Наверх на сайте

12 июн 2014 | Комментариев: 0 | Просмотров: 1601

В этой статье я расскажу как сделать красивую кнопку наверх на своем сайте. Ну что начнем что для этого нам нужно:

1. Создаем файл .js с любым названием. Я создал и назвал его toTop.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")})}});

2. В шаблон своего сайта подключаем его вставив кусок между <head></head>

3. И тут же вставляем этот кусок:

<a href="#" id="toTop">Наверх</a>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>

4. И теперь самое последние нужно добавить в css вот этот код:

#toTop {
width:100px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}

Вот и все результат вы можете увидеть на нашем сайте. Очень удобная кнопка, так как ее можно сделать как угодно под люой ваш вкус а также разместить где удобно.

Спасибо за внимание

Теги: CSS3, jQuery, HTML5