Скроллер на jQuery

Интересный скроллер на jQuery.

  1. работает с последней версией jQuery 1.4.2
  2. скрипт упакован (4Kb с комментариями)
  3. кроссбраузерный
  4. есть управляемый конфиг
  5. возможность стилизации с помощью css
  6. показывается только в самом нижнем положении экрана

Поскольку страничка разработчика на японском языке, привожу описание того, как уставить и сконфигурировать.

http://coliss.com/articles/build-websites/operation/javascript/296.html

Скачать плагин jquery.page-scroller можете отсюда:

http://shift-web.ru/sites/default/files/Jquery1.4.2&jquery.page-scroller.zip

Установка плагина jquery.page-scroller

Первым делом подключаем библиотеку(если не подключена), за ней плагин в <head>:

<script type="text/javascript" src="/JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/JS/jquery.page-scroller.js"></script>

Перед элементом </body> в самом конце страницы\шаблона добавляем код ссылки: 

<a href="#header" id="return_top" title="вверх страницы" onclick="return false;">турбо лифт наверх</a>

Аттрибуту href ссылки присвоим якорь идентификатора(id) самого ближнего к потолку страницы элемента. Это сохранит функциональность джампера у пользователей с отключенным JavaScript.

Следующим шагом добавим стили в css для отображения кнопки:

#return_top {
float: right;
display: inline;
margin: 0 55px 0 0;
padding: 0 0 0 15px;
font-size: 12px;
background: url(/images/my-bgimage-to-top.png) no-repeat left center;
}

Здесь укажите путь к своему фоновому изображению для кнопки:

background: url(/images/my-bgimage-to-top.png) no-repeat left center;

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

<a href="#header" id="return_top" title="вверх страницы" onclick="return false;">
<img src="/images/lift-to-top.png" alt="" />
</a>

При скролинге страницы в максимальное нижнее положение появляется кнопка подъёма. При клике происходит анимированный подъем с уменьшением скорости подъема ближе к верху страницы.

Аноним

Зачет автору Nice

Frost Demo

Чего то у меня не работает может кто поможет в скайпе frost_demo

Shift-Web

Что именно не получается?

Frost Demo

Все не получается не работает помогите в скайпе frots_demo

Shift-Web

К вечеру смогу.

Frost Demo

:( давай

Отправить комментарий