Как организовать на страничке сайта плавную прокрутку до якорной ссылки? По большому счету не так и сложно.
Сначала убедитесь, что на вашем сайте подключена библиотека 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 блок.
ВСЁ!
Теперь при нажатии на такую ссылку, посетитель плавно переместится на ту часть страницы где расположен блок с якорем. Как видите ничего сложного!
Понравилась статья? Поделись в соцсетях: