Анімаційна прокрутка до ідентифікатора при завантаженні сторінки

Я хочу анімувати прокрутку до певного ідентифікатора при завантаженні сторінки. Я провів багато досліджень і натрапив на це:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

але це, здається, починається від ідентифікатора та анімувати до початку сторінки?

HTML (який знаходиться на половині сторінки вниз) просто:

<h2 id="title1">Title here</h2>

Ви прокручуєте лише висоту свого елемента. offset () повертає координати елемента відносно документа, а topparam дасть вам відстань елемента в пікселях уздовж осі y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

Ви також можете додати затримку до нього:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);

Чисте рішення JavaScript з функцією scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

Параметр 'smooth' PS зараз працює з Chrome 61, як вказано в коментарях julien_c .

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-body-for-all-браузери .

Для цього існує плагін jquery. Він прокручує документ до конкретного елемента, щоб він ідеально знаходився посеред вікна перегляду. Він також підтримує послаблення анімації, щоб ефект прокрутки виглядав би дуже гладко. Перевірте це посилання .

У вашому випадку код є

$("#title1").animatedScroll({easing: "easeOutExpo"});

спробуйте з наступним кодом. створити елементи зі сторінкою імені класу -прокрутки та зберегти ідентифікаційне ім'я hrefвідповідних посилань

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

для простої прокрутки використовуйте наступний стиль

висота: 200px; переповнення: прокручування;

і використовуйте цей клас стилів, який розділ або розділ ви хочете показати прокрутки