Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Кнопка Наверх на сайте

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

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

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

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

 

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

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Появление видимости кнопки при поставленной галки в чекбоксе

Появление видимости кнопки при поставленной галки в чекбоксе

  Кнопка становится видимой при нажатом чекбоксе.  
Кнопки с анимацией на CSS3

Кнопки с анимацией на CSS3

Красивые кнопки с анимацией на CSS3. Всегда подойдет любому сайту
Обычное меню на CSS3 с закругленными краями

Обычное меню на CSS3 с закругленными краями

Простое CSS3 меню с закругленными краями использующее свойство ...border-radius, поэтому в IE может не отображаться.
Навигационное меню темными кнопками

Навигационное меню темными кнопками

Простое меню на CSS3/HTML с эффектом выдавливания в темных тонах.
Красивый эффект анимации для галереи

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.