jQuery якорь — делаем плавную прокрутку

Скроллинг до якоря

Доброго времени суток! Я как обычно рад вас видеть на страницах своего блога.

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

Якорь — так же называемый anchor, это метка создаваемая на странице вашего сайта, до которой нужно осуществить быстрый переход пользователя.

Делаем ссылку якорь для плавной jQuery прокрутки

Итак для начала рассмотрим как создать якорь. Ссылки якоря для навигации пользователя делают с помощью HTML тегов. Дело это простое и нехитрое, разберется даже новичок.

И так, что бы создать якорь для плавной jQuery прокрутки, нужно прописать, в нужном вам месте страницы, следующий код:

После этого, нам нужно сделать в начале статьи ссылку, нажав на которую осуществится плавная jQuery прокрутка.

Для этого создаем ссылку следующего вида:

После того как мы расставили якоря и сделали ссылки меню, прокрутка по таким ссылкам будет производится резко, скачком. Согласитесь, что это не слишком комильфо?

Для того, что бы избежать этого, мы создадим jQuery скрипт для осуществления плавной прокрутки пользователя до якоря. Об этом пойдет речь ниже.

Плавный скроллинг jQuery якоря

И так, вот мы и перешли к главному моменту. До создания плавной прокрутки jQuery якоря на вашем сайте.

Читайте также:  UL LI список в две колонки - HTML and CSS

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

Подключение jQuery скрипта для плавной прокрутки до якоря

Теперь нам нужно подключить jQuery скрипт, для плавного скроллинга по странице, от ссылки до якоря.

Это можно осуществить тремя способами. Давайте рассмотрим их подробно.

  1. Подключение jQuery скрипта возможно осуществить отредактировав ваш шаблон. Просто вставив этот код между тегами head, и сохраните.
  2. Так же возможно сделать это, сохранив код в отдельный скрипт, допустим file.js, а между тегами head прописать код, что расположен ниже.
  3. И наконец-то, мы можем прописать данный код, в уже существующий JS скрипт, который подключен к сайту.

Я лично рекомендую вам использовать второй или третий вариант. Удачи в ваших начинаниях и следите за обновлениями блога!

Музыкальная пауза / Агата Кристи — Последнее желание

Теги: плавная прокрутка до якоря jquery, jquery плавная прокрутка до якоря, плавная прокрутка до якоря, плавная прокрутка страницы до якоря, плавная прокрутка к якорю
1 Star2 Stars3 Stars4 Stars5 Stars (26 голосов: 4,08 из 5)
Загрузка...

Подпишитесь и получайте новые статьи мгновенно на электронную почту

Похожие записи

  • Как сделать картинку ссылкойКак сделать картинку ссылкой [sc:AdSense] Доброго времени суток я как обычно рад вас приветствовать на страницах своего сео блога. Хотелось бы сегодня уделить внимание довольно незначительному моменту, но как показал яндекс вордстат интересующего людей. […]
  • jQuery: Эффективно закрыть ссылку от индексацииjQuery: Эффективно закрыть ссылку от индексации [sc:AdSense] Доброго времени суток читателям моего блога. Сегодня хотел вам рассказать способ, как закрыть любые внутренние и внешние ссылки от индексации, которым я пользуюсь на всех своих сайтах, включая и этот […]
  • Отзыв о бирже статей eTXTОтзыв о бирже статей eTXT [sc:AdSense] Всем доброго времени суток, я рад что вы зашли на мой блог! Сегодня хотелось бы сделать обзор на биржу статей, где я постоянно закупаю контент для своих проектов - eTXT. [note]За эти пол года я работал с […]

3 комментария

  1. web_mas:

    Спасибо тебе, добрый человек. Скрипт получился максимально универсальным. Теперь везде его использую

  2. Сергей:

    Спасибо, я как раз искал такую штуку. И это прекрасно работает!

  3. YandexBrowser:

    Очень гибкий плагин jQuery, позволяющий вам создавать анимацию при прокрутке в любую позицию веб-страницы с настраиваемыми опциями стирания и скорости прокрутки.

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

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

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: