Кнопка вверх/вниз/комментарии на WordPress

Уже в третий раз пишу о кнопке «вверх», не очень хотелось заниматься повторам, но этот вариант имеет свои отличия. Часть статьи, в которой обычно идет объяснение, что это за кнопка и зачем она нужна я, пожалуй, пропущу. Для тех, кто еще незнаком с этим, можете ознакомиться здесь и здесь. Хотя, даже начинающие сайтостроители, будет известна подобная фишка и в чем ее смысл.

Особенности сегодняшнего варианта заключается в следующем: вместо одного подъема мы добавим еще кнопку вниз, чтобы с такой же быстротой смотреть информацию в футере сайта. И добавим третью кнопочку, отвечающею за быстрый доступ к форме комментариев. То есть при ее нажатии, страница с плавным эффектом перемещается до начала ввода комментария. При этом она будет видна только тогда, когда вы находитесь на внутренней страницы и, если открыта форма коммент. В итоги получится три кнопки «вверх/вниз/ком.».

Установка

Без лишней воды сразу займемся делом. Весь код состоит из трех частей: разметка, стили, скрипт. В качестве веб-иконок, я воспользовался шрифтом 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;
}

Покамест на своем сайте я использую точно такой вариант, так что результат в правом нижнем углу.

Читайте также: