Головна » WordPress » Хаки » “Back to Top” чи просто кнопка “Вверх” на jQuery + CSS
15
Кві
plus minus

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

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

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

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

Наведений нижче спосіб використовує jQuery скрипт із бібліотеки всесильного Google, тому вставляємо наступний код в header.php

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

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

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

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

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

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

P.S: DEMO скрипту дивимось у мене на сайті, з правого боку.

 

Додав Admin | 15.04.2012
(Ще немає голосів. Проголосуй!)
Loading ... Loading ...

Схожі записи:

Категорія: Хаки

  • Коля

    У тебя с сайта если код копировать, копируется только слово джерело и ссылка. Поправь. А так впринц можно выделить текст и перетянуть из хрома сразу в блокнот )

  • Данил

    Качественная HTML верстка. Натяжка на WordPress
    http://danil-html.ru – отзывы
    skype: danil-html