Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная - Сайтостроение - Кнопка «Наверх» как?

Кнопка «Наверх» как?

кнопка наверх

Здравствуйте дорогие читатели моего блога!
Сегодня я расскажу вам как реализовать на своём блоге кнопку «Наверх», да не простую, а золотую с плавной прокруткой!
То как она будет работать вы можете посмотреть на моём блоге.
Появляться кнопка будет, когда пользователь прокрутит страничку вниз.

Итак пора начать!
Первым делом скачайте вот этот архив:

Скачать

В архиве лежат: 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? Тогда я вам советую прочитать пост на тему:
Как уменьшить показатель отказов на сайте

Искренне ваш Мудрый Кот.

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Какие права на файлы и папки нужно поставить, чтобы не было беды (WordPress)
Блокнот убивает WordPress
Как добавить новые кнопки в WordPress
Отслеживаем неправильные (битые) ссылки при помощи плагина и избавляемся от них
Что делать если не работает загрузчик изображений в wordpress
Информация о статье:
Опубликовано: 2 ноября 2011, в рубрику Сайтостроение.
Теги: , , .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • Sergio
    02.11.2011

    Привет, хотел у себя конкурс запустить и тебя привлечь, да вижу ты и сам собираешься запустить его =) Напиши мне на почту, может запустим совместно )

    [Ответить]

  • Татьяна КудряшЕва
    03.11.2011

    Очень удобная кнопка, только у вас она такая миниатюрная и не с той стороны где привычно, еле увидела :lol:
    На одном сайте видела не кнопку, а лапки идущие вверх, так хочу такие — как раз в тему )))

    [Ответить]

  • 03.11.2011

    Мне бы тоже подошли :lol:
    Но пока, что и эта кнопочка сойдёт :arrow:

    [Ответить]

  • jonyit
    03.11.2011

    и меня подтягивай если что на конкурс!
    чё нибудь сварганем)

    [Ответить]

  • 03.11.2011

    Я сначала в твоём конкурсе выиграю, а уж потом… :lol:

    [Ответить]

  • jonyit
    03.11.2011

    Это я пока тэстовый кункурс сделал, узнать как будут учавствовать люди.

    Планирую конкурс на 2000 касаря сделать.

    [Ответить]

  • 03.11.2011

    Если на 2 тысячи косарей, то нифигово =)

    А если на 2 косаря, то тоже очень неплохо! :lol:

    [Ответить]

  • Лиза
    03.11.2011

    Очень удобная кнопка! Спасибо что поделился ею=)

    [Ответить]

  • Кеша
    03.12.2011

    Статья супер ког раз такое искал))

    Но блин…тега я не в header.php не в списке стилей не нашел((..где он, может кто знает??

    [Ответить]

  • 03.12.2011

    Тег /body находится в подвале

    [Ответить]

  • NMitra
    05.01.2012

    Да, тоже такую фишку у себя на блоге описала, но сама пользуюсь по старинке — хеш. Прикольный котик карабкается. Мне так вообще по душе разные фишки-шаблоны: Сосновкий-ёлка, Сидаш-зелёный чебурек. Но потом господа делают как все и становится скучно. У меня тоже сейчас скучно. :(

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


Подпишись на обновления блога:

RSS    twitter    e-mail


119 подписчиков

102 фолловера


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка


  • Лучшее
  • Советую
  • Новое

Я читаю:

Записки ночного блогера
Blogger.omg-linux