Плавный переход по якорям на jQuery
Многие на своих сайтах используют якоря. Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря позволяют осуществлять быструю навигацию на сайтах с большим количества текстов и контента. Если переход по якорю на другую страницу сайта сопровождается загрузкой, то переход по якорям внутри содержимого одной страницы происходит очень резко и выглядит это некрасиво. Давайте попробуем реализовать плавный переход по якорям с фиксированной скоростью.
Как это работает?
Для начала нам необходимо сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>
|
1 |
<p><a name="top"></a></p> |
В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки # впереди.
|
1 |
<p><a href="#top">Наверх</a></p> |
Осталось добавить скрипт, который будет перехватывать клик по ссылке. Проще всего это сделать с помощью jQuery, поэтому перед скриптом мы осуществляем подключение библиотеки jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { jQuery('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); if (target.length) { jQuery('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); </script> |
Как Вы должно быть заметили из кода, обработка производится для всех ссылок, содержащих символ решетки # a[href*=#]. Для плавного перехода мы указали 1000 мс. Если Вы хотите производить более плавный или более быстрый переход, измените это значение в большую или меньшую сторону соответственно.
Еще одно преимущество данного метода — при переходе к якорю в адресной строке не появляется имени якоря. Если для Вас важно, чтобы в ссылке оставалось наименование якоря, просто удалите в скрипте строку return false;
Вы также можете скачать пример работы скрипта из вложения в конце статьи.
Комментарии
Здесь еще никто не оставлял комментарии.