Домой / HELP / Плавная прокрутка к нужному элементу или якорю. Используя jQuery

Плавная прокрутка к нужному элементу или якорю. Используя jQuery

Якорь — закладка с уникальным именем в любом месте веб-странице, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки «#» впереди:

Пример, как с помощью простого скрипта сделать плавную прокрутку страницы к якорю.
Шаги:
1 — сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a> или же просто присвоить какому-либо тегу атрибут id с желаемым значением. Имя якоря должно быть уникальным в пределах страницы. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

2 — реализация плавного перехода используя jQuery
Скрипт должен срабатывать по клику на ссылках, у которых атрибут href начинается с решетки «#». В jQuery это сделаем так:

Для изменения значения отступа прокрутки сверху используется метод scrollTop. offset().top определяет значение отступа сверху для якоря (с id равному значению атрибута href), которое устанавливается в scrollTop
Плавность реализует функция animate.
В конце не забываем поставить return false; для отмены действия по умолчанию.
Скрипт можно разместить в HTML странице заключив в тег script или же подключить отдельным файлом (с расширением js) что позволит использовать это на всех страницах нашего сайта.

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Как разделить контент на две колонки wordpress

WordPress замечательная CMS, однако для реализации некоторых функций в вашей теме, иногда требуется нестандартное мышление. Обычно …

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

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