Как реализовать плавный переход на странице от одной секции к другой?

Question

[Даниил Шмыголь]

В общем, имеется две секции на index-странице, при нажатии на кнопку осуществляется переход от одного "section" к другому, но как сделать так, чтобы это происходило не моментально, а плавно и с прокруткой? т.е как сделать плавную анимацию скроллинга при нажатии кнопки на одной странице?

Comments

[Ankhena]

гугл -> "плавный переход к якорю"

Answer 1

[AlexandrBirukov]

// ******************************************** Плавная прокрутка до якоря

    $("a.scroll_to").click(function (event) {
        event.preventDefault();
        var elementClick = $(this).attr("href");
        var destination = $(elementClick).offset().top;
        $("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 400);
    });

Comments

[Даниил Шмыголь]

О, спасибо, пойду про якори почитаю!

[AlexandrBirukov]

etozhekqx, вот ниче статья

[Эдуард Валеев]

Александр, Вы не могли бы мне помочь вот с чем.

Есть сайт implant.alba-avis.dental

Есть следующий код, который осуществляет плавный переход (по клику на пункт меню) до определенного якоря:

jQuery('a[href^="#"]').click(function () { 
    elementClick = jQuery(this).attr("href");
    destination = jQuery(elementClick).offset().top;
    jQuery('html,body').animate( { scrollTop: (destination - 140) }, 1100 );        
    return false;
});

как мы видим:

1. в elementClick записываем искомый элемент
   
2. в destination - расстояние элемента от "потолка"
   
3. осуществляем мягкий переход до заданой точки (за минусом 140 пикселей)
   

если заглянуть в код этой страницы, то можно увидеть, что данные еще и в консоль выводятся. Так вот, что меня удивляет - сам переход не осуществляется, но если строку

jQuery('html,body').animate( { scrollTop: (destination - 140) }, 1100 );

выполнить в отладчике - то переход осуществляется тот час же после запуска.

Понять не получается - где зарыта собака.

[AlexandrBirukov]

Эдуард Валеев, где у вас что не осуществляется? что не получается понять?