Простая кнопка "Наверх" для удобной навигаци по сайту


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

Кнопка с эффектом при наведении

Первый, который у меня стоит, имеет эффект при наведении курсора, но скроллинг (перемещение) является динамичным. Состоит такая кнопка из такого кода:

<style>
.iptotop {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
display: block;
background: url(http://2.bp.blogspot.com/-tS4a6of-j5Q/UfZ25YMVqiI/AAAAAAAAFm0/aesi1Ans5oU/s1600/top.png) 0 0 no-repeat;
z-index: 99999999;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out
}
.iptotop:hover {
background: url("http://2.bp.blogspot.com/-1sdAwGvGOuk/UfZ235yA_hI/AAAAAAAAFms/2-7YReB_pcM/s1600/top_hov.png") 0 0 no-repeat;
}
.iptotop.hidden {
bottom: -100px
}
</style>
<a class=' iptotop' href='#'>
<span></span>
</a>

Кнопка простая, без эффектов

Теперь предлагаю Вам ознакомиться со вторым видом. Здесь отсутствует какой либо эффект, но для перемещение по странице, этот код в самый раз. При том, этот код на загрузку страницы никак не будет влиять.

<style>
.iptotop {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
display: block;
background: url(http://2.bp.blogspot.com/-tS4a6of-j5Q/UfZ25YMVqiI/AAAAAAAAFm0/aesi1Ans5oU/s1600/top.png) 0 0 no-repeat;
z-index: 99999999;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out
}
.iptotop.hidden {
bottom: -100px
}
</style>
<a class=' iptotop' href='#'>
<span></span>
</a>

Чтобы кнопка имела Вашу собственную картинку, замените ссылку на изображение (выделено красным), на свою. Или скопируйте ссылку на подорванные мною изображение, и вставьте ее в  выше предложенный код.

123456789











Напомню, что вставлять код и стиль кнопки нужно перед тегом  </body>, или перед последним тегом  </div> в вашем шаблоне (для html), а также после </footer> (html5).


Вариант в сплавным скроллингом, на основе jquery

Собственно, подключаем  jquery, с хранилища Google, код помещаем после </head>, но перед <body>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>


Затем вставьте этот код, перед тегом </body>.

<style>
#toTop {
position: fixed;
bottom: 20px;
right: 2px;
background: none;
cursor: pointer;}
</style>
<a href="#" id="toTop"><img src=' http://2.bp.blogspot.com/-tS4a6of-j5Q/UfZ25YMVqiI/AAAAAAAAFm0/aesi1Ans5oU/s1600/top.png' border="0" align="absmiddle" /></a>
<script src="https://dl.dropboxusercontent.com/s/ewiuc3lc8dkzx6h/toTop.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>

И вновь, вставьте свою ссылку на изображение, заменив красный текст.

А также, если Вы хотите, что бы скрипт 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")})}});

Теперь сохраните файл, так чтобы его название и расширении было toTop.js, если всё готово, то загрузите файл на сервер. Не забудьте заменить ссылку. 

Текстовая кнопка

Чтобы вместо изображение был текст, то следует немного "пошаманить" с кодом.

Для первых двух способов

Для начала Вам нужно изменить код в css:

1 шаг
background: url("http://2.bp.blogspot.com/-1sdAwGvGOuk/UfZ235yA_hI/AAAAAAAAFms/2-7YReB_pcM/s1600/top_hov.png") 0 0 no-repeat;

2 шаг
заменить на код с фоновым цветом текста
background: #ffffff;

3 шаг
добавить в стили такой код:
color: #000;

4 шаг
изменить код
<a class=' iptotop' href='#'>
<span></span>
</a>

добавив текст кнопки

<a class=' iptotop' href='#'>
<span>Наверх</span>
</a>

Теперь для текстовой кнопки , с эффектом плавного скроллинга:

Для начала замените код css на эти строки:

#toTop {
width: 89px;
height: 24px;
background: #D9DAEE;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: fixed;
bottom: 30px;
right: 2px;
text-align: center;
text-decoration: none;
font-size: 12pt;
color: #1A2534;
cursor: pointer;}

Нужно также изменить код ссылки:

<a href="#" id="toTop"><img src=' http://2.bp.blogspot.com/-tS4a6of-j5Q/UfZ25YMVqiI/AAAAAAAAFm0/aesi1Ans5oU/s1600/top.png' border="0" align="absmiddle" /></a>

на такой

 <a href="#" id="toTop">Наверх</a>

Конечно, Вы можете изменить текст, а также его цвет и фон свой. Так, что экспериментируйте, дорогие читатели ;)



Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

2 коммент. :

  1. Можно еще пару плагинов для wordpress в статейку добавить )))

    ОтветитьУдалить
    Ответы
    1. Максим, спасибо за оставленный комментарий)

      Скоро выйдет отдельный материал о различных плагинах для такой фичи )

      Удалить