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

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


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

Для установки блока необходимо скопировать код, который приведён ниже. Затем идём во вкладку шаблон, сделаем резервное копирование и нажимаем изменить 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-скорость прокрутки. Добавляйте или убавляйте на своё усмотрение. После установки не забудьте сохранить шаблон.

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

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

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

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