Как организовать на страничке сайта плавную прокрутку до якорной ссылки? По большому счету не так и сложно.
Сначала убедитесь, что на вашем сайте подключена библиотека jquery. Это должно выглядеть примерно так:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Далее в сам код страницы или в отдельный js-файлик необходимо вставить небольшой скрипт. Комментарии я привел в самом скрипте, так что затруднений с реализацией быть не должно.
<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>
Далее нужно создать ссылку и вместо пути указать якорь и знак решетка перед ним – #
<a href="#blok">Ссылка 1</a>
Нашим якорем будет блок с ID – #blok. Для нужного элемента на странице прописываем ему ID – #blok. Например так:
<section id="blok">...</section>
В нашем случаи – это простой section блок.
ВСЁ!
Теперь при нажатии на такую ссылку, посетитель плавно переместится на ту часть страницы где расположен блок с якорем. Как видите ничего сложного!
Понравилась статья? Поделись в соцсетях: