» » “Back to Top” чи просто кнопка “Вверх” на jQuery + CSS

“Back to Top” чи просто кнопка “Вверх” на jQuery + CSS

“Back to Top” чи просто кнопка “Вверх” на jQuery + CSS
Що ж, не мені вам розповідати наскільки важливо, щоб відвідувачу будь-якого сайту було на ньому комфортно. Одним з способів покращення вашого сайту, в плані комфорту, є така собі “чарівна” кнопочка ”Back to Top” чи просто кнопка “Вверх”.

Мої пошуки гарного і простого варіанту цієї кнопки тривали досить довгий період то замудрі скрипти, непотрібні плагіни і ще чорт зна що… Просто жах… Я вже не говорю про прості HTML коди, які аж ніяк не можна назвати “гарним” виходом із ситуації.

Не буду затягувати, переходжу до суті.

Наведений нижче спосіб використовує jQuery скрипт із бібліотеки всесильного Google, тому вставляємо наступний код в header.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>


Як бачимо, окрім посилання на фал Googl’а маємо скрипт, який можете без проблем підкорегувати під свій смак.

І все, що нам залишається, так це додати трішки CSS кода для стилізації. В файл, з вашими стилями, вписуємо наступний код:
#back-top {

    position: fixed;

    bottom: 30px;

    margin-left: -150px;

}

#back-top a {

    width: 108px;

    display: block;

    text-align: center;

    font: 11px/100% Arial, Helvetica, sans-serif;

    text-transform: uppercase;

    text-decoration: none;

    color: #bbb;

    -webkit-transition: 1s;

    -moz-transition: 1s;

    transition: 1s;

}

#back-top a:hover {

    color: #000;

}

 

#back-top span {

    width: 108px;

    height: 108px;

    display: block;

    margin-bottom: 7px;

    background: #ddd url(up-arrow.png) no-repeat center center;

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px;

    -webkit-transition: 1s;

    -moz-transition: 1s;

    transition: 1s;

}

#back-top a:hover span {

    background-color: #777;

}


Далі малюємо кнопочку, виключно на ваш смак (адже кому то ще потрібно, як не нам) і вказуємо повний шлях до неї (посилання знаходиться в тегу “background”)

Я зіткнувся з проблемою, що наведений вище процес передбачає додавання такої кнопки, виключно для головної сторінки, мені здається , що це обумовлено специфікою теми. Тому, в кого така ж проблема, робимо наступне.

В файли теми, а саме: index.php, single.php, page.php, archive.php, author.php, category.php, tag.php (цілком нормально, якщо в вас немає того чи іншого файла теми, додаємо в ті, які є та на тих де ми хочемо бачити кнопку) додаємо наступний код:
<p id="back-top">

   <a href="#top"><span class="arrow"></span>На початок</a>

</p>

Кнопка додана. Надіюсь мій досвід стане вам у пригоді.


wordpress
2269 13.10.13



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру