Плавный переход по якорям на jQuery

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

Если переход по якорю на другую страницу сайта сопровождается загрузкой, то переход по якорям внутри содержимого одной страницы происходит очень резко и выглядит это некрасиво. Давайте попробуем реализовать плавный переход по якорям с фиксированной скоростью.

Как это работает?

Для начала нам необходимо сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>

В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки # впереди.

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

Как Вы должно быть заметили из кода, обработка производится для всех ссылок, содержащих символ решетки # a[href*=#]. Для плавного перехода мы указали 1000 мс. Если Вы хотите производить более плавный или более быстрый переход, измените это значение в большую или меньшую сторону соответственно.

Еще одно преимущество данного метода — при переходе к якорю в адресной строке не появляется имени якоря. Если для Вас важно, чтобы в ссылке оставалось наименование якоря, просто удалите в скрипте строку return false;

Вы также можете скачать пример работы скрипта из вложения в конце статьи.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
Пока оценок нет
Комментарии

Здесь еще никто не оставлял комментарии.

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

* - поля обязательные для заполнения. E-mail не публикуется.