Уже в третий раз пишу о кнопке «вверх», не очень хотелось заниматься повторам, но этот вариант имеет свои отличия. Часть статьи, в которой обычно идет объяснение, что это за кнопка и зачем она нужна я, пожалуй, пропущу. Для тех, кто еще незнаком с этим, можете ознакомиться здесь и здесь. Хотя, даже начинающие сайтостроители, будет известна подобная фишка и в чем ее смысл.
Особенности сегодняшнего варианта заключается в следующем: вместо одного подъема мы добавим еще кнопку вниз, чтобы с такой же быстротой смотреть информацию в футере сайта. И добавим третью кнопочку, отвечающею за быстрый доступ к форме комментариев. То есть при ее нажатии, страница с плавным эффектом перемещается до начала ввода комментария. При этом она будет видна только тогда, когда вы находитесь на внутренней страницы и, если открыта форма коммент. В итоги получится три кнопки «вверх/вниз/ком.».
Установка
Без лишней воды сразу займемся делом. Весь код состоит из трех частей: разметка, стили, скрипт. В качестве веб-иконок, я воспользовался шрифтом Font Awesome, чтобы не мучиться с графическими иконками. Открываем файл footer.php, сразу после тега или класса, или идентификатора footer добавляем разметку в виде маркированного списка.
<ul id="scroll">
<li><a class="scroll-top"><i class="fa fa-angle-up"></i></a></li>
<?php if ( comments_open() ) : ?><!--условие: если открыта форма коммен.-->
<?php if(is_single() || is_page()) { ?><!--условие: только страницы и внутренние...-->
<li><a class="scroll-com"><i class="fa fa-comments"></i></a></li>
<?php } ?>
<?php endif ;?>
<li><a class="scroll-bot"><i class="fa fa-angle-down"></i></a></li>
</ul>
Не закрывайте этот файл, мы в нем еще подключим скрипт сразу перед закрывающим тегом </body>, вставляем такой код:
<script>
// Scroll
jQuery(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('.scroll-top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // подъем вверх
$('.scroll-com').click(function(){$('html,body').animate({scrollTop:$('#comment').offset().top}, 800);});// обозначить класс или id элемента комментарий
$('.scroll-bot').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});// обозначить самый низ сайта
});
</script>
Два последних идентификатора замените на свои.
#comment –указать класс или id элемента отвечающий, к примеру, за надпись: «Добавить комментарий»
#footer — указать класс или id элемента, отвечающий за футер.
Теперь осталось добавить стили в файл style.css.
#scroll {
bottom: 95px;
float: right;
position: fixed;
right: 30px;
width: 35px;
display:none;
list-style: none;
z-index:999999;
box-sizing: content-box;
}
#scroll i {
color: #ffffff;
font-size: 22px;
line-height: 28px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
#scroll li a {
background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
margin-top: 6px;
opacity: 0.8;
padding: 3px 5px;
text-align: center;
}
#scroll a:hover {
opacity: 1;
transition: all 0.5s ease 0s;
}
Покамест на своем сайте я использую точно такой вариант, так что результат в правом нижнем углу.
Андрей, спасибо за статью. На мой взгляд, это лучшее решение подобного скрипта!
Рад, что кому-то пригодилось.