Красивый блок кнопок прокрутки страницы


красивый блок кнопок прокрутки
Приветствую всех, кто читает мои шпаргалки. Сейчас уже нет, наверно, не одного блога, где бы не стояла стрелка или кнопка для прокрутки страницы. Разве что за некоторым исключением. Варианты таких кнопочек и как их установить в блоге можно посмотреть в этом сообщении.


Многие при прокрутке длинного текста пользуются просто стрелками на клавиатуре. Сама я использую функцию колёсика мыши для этого, когда нет на сайте таких кнопок. Но, идя в ногу со временем всё равно такие стрелки быстрого перехода вверх и вниз по странице, всё же считаю не будут лишними. Поэтому и хочу предложить сегодня блок кнопок прокрутки страницы и вверх и вниз. К тому же в нём есть функция и быстрого и медленного перехода. Стоп и начало движения. Всё это в одном месте и всё для удобства наших пользователей.
Вот так он будет выглядеть на странице.


Для установки блока необходимо скопировать код, который приведён ниже. Затем идём во вкладку шаблон, сделаем резервное копирование и нажимаем изменить HTML. С помощью клавиш Ctrl+F находим закрывающийся тег </body> и прямо над ним устанавливаем его. Советую сначала код поместить у себя в блокноте или черновике. Возможно, некоторые значения захочется поменять по своему усмотрению.

<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(http://lh5.ggpht.com/-wREw7V6WEsg/UYQq0-d5cWI/AAAAAAAABsI/vnH-wGlJp6s/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>

Синим я выделила цвет кнопок, который можно поменять на свой. Значение 50-скорость прокрутки. Добавляйте или убавляйте на своё усмотрение. После установки не забудьте сохранить шаблон.

Теперь у вас на блоге есть такие замечательные кнопки прокрутки страницы на любой вкус. А если вы хотите установить просто кнопку для ленивых то почитайте это сообщение.
И сегодня ставлю в шпаргалке точку. Всего вам доброго. Увидимся.
Удачи нам всем.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

8 комментариев:

  1. Привет, Вика. Тема интересная, будет время - займусь.

    ОтветитьУдалить
    Ответы
    1. Привет, Сергей.Спасибо, что зашёл. Я на некоторых блогах их видела и вот скумекала, как сделать. Кстати, у тебя достаточно полное изложение материала всегда. Думаю, что они будут кстати.

      Удалить
  2. Такие кнопочки, здорово смотрелись бы на твоем блоге под новый дизайн)) А вообще, очень удобная штучка. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, привет. Вот тоже подумываю над этим. Пока в блоге с другим работы много. Немного разгребу и подумаю.

      Удалить
  3. Довольно-таки интересное решение вопроса. Надо будет на досуге подумать. Может установлю у себя, хотя у меня статьи не очень длинные.








    ОтветитьУдалить
  4. Александр. Это в любом случае удобно. К тому же в ногу со временем.

    ОтветитьУдалить
  5. Вика отличный скрипт прокрутки, особенно для блогспота. Помню два вечера искал подобную примочку.

    ОтветитьУдалить
    Ответы
    1. Владимир. Главное работает и довольно симпатично смотрится. Спасибо.

      Удалить

Пользовательский поиск