Данный скрипт позволяет плавно прокручивать страницу вверх и вниз по клику на соответствующие кнопки. Эти кнопки располагаются, для удобства, в левом нажнем углу монитора, но по желанию их можно зафиксировать в любом другом месте.
Кнопки имеют нейтральный дизайн, и подойдут к любому сайту. Чтобы не отвлекать посетителя от прочтения статьи, - кнопки при скроллинге страницы становятся прозрачными.
Подключается данный скрипт строго после бибилиотеки jQuery, как показано ниже.
Оборачиваем свой контент на сайте в DIV с id = content и добавляем наши кнопки:
тут статья
Осталось навести красоту и прописать CSS оформление:
.nav_up{ padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(../images/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:30px; white-space:nowrap; cursor: pointer; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .nav_down{ padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(../images/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; left:70px; white-space:nowrap; cursor: pointer; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }
Комментарии ()