Лого www.SiteHere.ru

Плавное перемещение по странице jQuery

Плавное перемещение по странице jQuery

Когда пишешь большой текст, затем становиться неудобно его просматривать. Но когда если перемещаться хотя бы по заголовкам, то это уже приятнее. Да и для пользователя это удобнее. И в этом уроке мы рассмотрим как сделать такое перемещение по тексту наиболее привлекательным и плавным.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Первым делом необходимо подключить необходимые плагины:

1
2
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.jumpto.js"></script>

Структура HTML страницы выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="page_container">
    <div class="jumpto-block">
        <h2>Заголовок 1</h2>
        <h3>Подзаголовок 1</h3>
        ....
        <h3>Подзаголовок 2</h3>
        ....
    </div>
    <div class="jumpto-block"> 
        <h2>Заголовок 2</h2>
        <h3>Подзаголовок 1</h3>
        ...
    </div>
</div>

JS часть

Как только HTML страница готова, необходимо вызвать jQuery функцию:

1
2
3
4
5
6
7
8
9
10
11
$(".page_container").jumpto({
    firstLevel: "> h2",
    secondLevel: false,
    innerWrapper: ".jumpto-block",
    offset: 400,
    animate: 1000,
    navContainer: false,
    anchorTopPadding: 20,
    showTitle: "Перейти к",
    closeButton: true
});

Некоторые пояснения по коду:

  • firstLevel — здесь определяется селектор первого уровня навигации. По умолчанию «> h2»
  • secondLevel — также данный плагин(JumpTo) поддерживает навигацию с подменю, как вы можете убедиться на втором и третьем демо примере.
  • animate — определяет на сколько быстро будет прокручиваться страница при переходе к выбранному заголовку.
  • showTitle — это просто текст над меню.
  • closeButton — кнопка «Закрыть». Она позволяет скрыть меню или раскрыть его. По умолчанию присутствует, но можно ее бурать выставив значение «false».

Вывод

Конечно можно и не использовать jQuery, чтобы организовать перемещение по странице(с помощью якорей или anchor), но в этом случае перемещение выглядит действительно красиво :).

Успехов!

Источник: www.onextrapixel.com

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Александр

    Здравствуйте.А возможен вариант.с демо 1.чтобы в окне где заголовки находилось фиксированно около 10 заголовков,а остальные 11.12…n можно было перемещать скроллером на необходимую главу?

     
    • Юрий

      Александр, что значит «можно было перемещать скроллером на необходимую главу»?

       
  • Александр

    Чтобы сам блок был определённой(фиксированной) высотой, а содержимое в нём можно было бы манипулировать scrollbar.

     
    • Юрий

      Александр, задайте фиксированную высоту, а затем добавить свойство overflow-y:scroll.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *