Плавная прокрутка до якоря на вашем сайте

Плавная прокрутка до якоря на вашем сайте

Плавная прокрутка до якоря — как это сделать на вашем сайте? По большому счету не так и сложно.

Сначала убедитесь, что на вашем сайте подключена библиотека  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 блок.

ВСЁ!

Теперь при нажатии на такую ссылку, посетитель плавно переместится на ту часть страницы где расположен блок с якорем. Как видите ничего сложного!

---