Как организовать на страничке сайта плавную прокрутку до якорной ссылки? По большому счету не так и сложно.
Сначала убедитесь, что на вашем сайте подключена библиотека jquery. Это должно выглядеть примерно так:
|
1 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> |
Далее в сам код страницы или в отдельный js-файлик необходимо вставить небольшой скрипт. Комментарии я привел в самом скрипте, так что затруднений с реализацией быть не должно.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $("a[href*=#]").on("click", function(e){ var anchor = $(this); $('html, body').stop().animate({ scrollTop: $(anchor.attr('href')).offset().top }, 800); e.preventDefault(); return false; }); }); </script> |
Далее нужно создать ссылку и вместо пути указать якорь и знак решетка перед ним – #
|
1 |
<a href="#blok">Ссылка 1</a> |
Нашим якорем будет блок с ID – #blok. Для нужного элемента на странице прописываем ему ID – #blok. Например так:
|
1 |
<section id="blok">...</section> |
В нашем случаи – это простой section блок.
ВСЁ!
Теперь при нажатии на такую ссылку, посетитель плавно переместится на ту часть страницы где расположен блок с якорем. Как видите ничего сложного!
Понравилась статья? Поделись в соцсетях:
Всего комментариев: 0