Blogger-man та цифровізатор рідної громади!
Ігор Петренко 
Материал о том, как на Ваш сайт установить кнопку перемещение на верхнюю часть вашего сайта. Проще говоря, кнопка "Наверх" для вашего блога / сайта. Для Вас, дорогие друзья, подготовлено четыре способа реализации.
Кнопка с эффектом при наведении
Первый, который у меня стоит, имеет эффект при наведении курсора, но скроллинг (перемещение) является динамичным. Состоит такая кнопка из такого кода:<style>
.iptotop {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9aZpZ4JkaQMkk_JfygU39wgOLmTbn_TCLFIqSMbit1BRAvxMo9L6vi6nLsdZlNlocX4CTg5WMVENm3nG9RKnvsQ1fpFvolDB3KHHwEym1a5-qzd3yxjT-cEA2_rOrYd0f8xiniyrjrl_n/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbSktbqiSDmuCmauQrYPFCgCMOrkaSz0B14T7XLO3fwDpU6oAA_GTcIFMgO5W70DaY9xGL-daSnoUljonyGzm1P01mnZYQwG7W36FH9seTJspQyMqXngXuiL2jsaIWLoFy-ASymHPrD0n/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9aZpZ4JkaQMkk_JfygU39wgOLmTbn_TCLFIqSMbit1BRAvxMo9L6vi6nLsdZlNlocX4CTg5WMVENm3nG9RKnvsQ1fpFvolDB3KHHwEym1a5-qzd3yxjT-cEA2_rOrYd0f8xiniyrjrl_n/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>
Чтобы кнопка имела Вашу собственную картинку, замените ссылку на изображение (выделено красным), на свою. Или скопируйте ссылку на подорванные мною изображение, и вставьте ее в выше предложенный код.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
 |  |  |  |  |  |  |  |  |
Напомню, что вставлять код и стиль кнопки нужно перед тегом </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=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9aZpZ4JkaQMkk_JfygU39wgOLmTbn_TCLFIqSMbit1BRAvxMo9L6vi6nLsdZlNlocX4CTg5WMVENm3nG9RKnvsQ1fpFvolDB3KHHwEym1a5-qzd3yxjT-cEA2_rOrYd0f8xiniyrjrl_n/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 {
position: fixed;
bottom: 20px;
right: 2px;
background: none;
cursor: pointer;}
</style>
<a href="#" id="toTop"><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9aZpZ4JkaQMkk_JfygU39wgOLmTbn_TCLFIqSMbit1BRAvxMo9L6vi6nLsdZlNlocX4CTg5WMVENm3nG9RKnvsQ1fpFvolDB3KHHwEym1a5-qzd3yxjT-cEA2_rOrYd0f8xiniyrjrl_n/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIbSktbqiSDmuCmauQrYPFCgCMOrkaSz0B14T7XLO3fwDpU6oAA_GTcIFMgO5W70DaY9xGL-daSnoUljonyGzm1P01mnZYQwG7W36FH9seTJspQyMqXngXuiL2jsaIWLoFy-ASymHPrD0n/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=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9aZpZ4JkaQMkk_JfygU39wgOLmTbn_TCLFIqSMbit1BRAvxMo9L6vi6nLsdZlNlocX4CTg5WMVENm3nG9RKnvsQ1fpFvolDB3KHHwEym1a5-qzd3yxjT-cEA2_rOrYd0f8xiniyrjrl_n/s1600/top.png' border="0" align="absmiddle" /></a>
на такой
<a href="#" id="toTop">Наверх</a>
Конечно, Вы можете изменить текст, а также его цвет и фон свой. Так, что экспериментируйте, дорогие читатели ;)
Можно еще пару плагинов для wordpress в статейку добавить )))
ВідповістиВидалитиМаксим, спасибо за оставленный комментарий)
ВидалитиСкоро выйдет отдельный материал о различных плагинах для такой фичи )