Здравствуйте дорогие читатели моего блога!
Сегодня я расскажу вам как реализовать на своём блоге кнопку «Наверх», да не простую, а золотую с плавной прокруткой!
То как она будет работать вы можете посмотреть на моём блоге.
Появляться кнопка будет, когда пользователь прокрутит страничку вниз.
Итак пора начать!
Первым делом скачайте вот этот архив:
В архиве лежат: js скрипт, а так же несколько изображений для вашей кнопки.
Перейдём к установке этой кнопки на ваш блог.
Загрузите файл vverx.js на блог.
Вы можете загрузить его в абсолютно любое место.
Теперь в редакторе вашей темы выберите файл «Заголовок» (header.php), и перед закрывающимся тегом:
</head>
вставьте два этих кода:
Подключение jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Подключение vverx.js:
<script type="text/javascript" src="адрес до файла/vverx.js">{lang: 'ru'}</script>
Затем загрузите на блог понравившуюся вам картинку кнопки «Наверх».
А в конец файла «Список стилей» (style.css), вставьте вот этот код:
.scrollTop{ background:url(путь до изображения кнопки) 0 0 no-repeat; display:block; width:35px; height:20px; position:fixed; bottom:10px; left:4%; z-index:2000; } .scrollTop:hover{ background:url(путь до изображения кнопки) 0 0 no-repeat; display:block; width:35px; height:20px; position:fixed; bottom:10px; left:4%; z-index:2000; }
Рассмотрим CSS код немножко подробнее, чтобы вы могли его редактировать:
.scrollTop{ – кнопка «наверх» без наведения.
background:url – адрес картинки.
display:block; — не трогайте)
width:35px; — ширина изображения.
height:20px; — высота изображения.
position:fixed; — не трогайте)
bottom:10px; — отступы.
left:4%; — смещение изображения, чем больше значение тем правее кнопка «наверх»
z-index:2000; — не трогайте)
}
.scrollTop:hover{ – кнопка «наверх» с наведением.
Всё абсолютно-то же самое, просто если вы хотите чтобы при наведении кнопка «наверх» изменялась, то поставьте в background:url адрес другой картинки (которая будет появляться при наведении).
}
Остался последний штрих.
Перед закрывающимся тегом
</body>
вставьте вот этот код:
<a class='scrollTop' href='#header' style='display:none;'></a>
Вот и всё!
Теперь ваша кнопка «Наверх» начнёт работать, и вашим читателям будет удобнее перемещаться, по-вашему, блогу.
Если есть вопросы прошу задавать их в комментариях.
Да кстати я планирую провести очень интересный конкурс, советую вам подписаться на RSS, а то пропустите :shock:
И кстати:
На вашем блоге большой boucne rate? Тогда я вам советую прочитать пост на тему:
Как уменьшить показатель отказов на сайте
Искренне ваш Мудрый Кот.
Привет, хотел у себя конкурс запустить и тебя привлечь, да вижу ты и сам собираешься запустить его =) Напиши мне на почту, может запустим совместно )
[Ответить]
Очень удобная кнопка, только у вас она такая миниатюрная и не с той стороны где привычно, еле увидела
На одном сайте видела не кнопку, а лапки идущие вверх, так хочу такие — как раз в тему )))
[Ответить]
Мне бы тоже подошли
Но пока, что и эта кнопочка сойдёт
[Ответить]
и меня подтягивай если что на конкурс!
чё нибудь сварганем)
[Ответить]
Я сначала в твоём конкурсе выиграю, а уж потом…
[Ответить]
Это я пока тэстовый кункурс сделал, узнать как будут учавствовать люди.
Планирую конкурс на 2000 касаря сделать.
[Ответить]
Если на 2 тысячи косарей, то нифигово =)
А если на 2 косаря, то тоже очень неплохо!
[Ответить]
Очень удобная кнопка! Спасибо что поделился ею=)
[Ответить]
Статья супер ког раз такое искал))
Но блин…тега я не в header.php не в списке стилей не нашел((..где он, может кто знает??
[Ответить]
Тег /body находится в подвале
[Ответить]
Да, тоже такую фишку у себя на блоге описала, но сама пользуюсь по старинке — хеш. Прикольный котик карабкается. Мне так вообще по душе разные фишки-шаблоны: Сосновкий-ёлка, Сидаш-зелёный чебурек. Но потом господа делают как все и становится скучно. У меня тоже сейчас скучно.
[Ответить]