Анимация прокрутки до ID на загрузке страницы

Im tring, чтобы оживить прокрутку к определенному идентификатору при загрузке страницы. Я провел много исследований и наткнулся на это:

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

но это, похоже, начинается с идентификатора и анимации в верхней части страницы?

HTML (который находится на полпути вниз по странице):

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

Ответ 1

Вы прокручиваете только высоту своего элемента. offset() возвращает координаты элемента относительно документа, а top param даст вам расстояние элемента в пикселях вдоль оси y:

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

И вы также можете добавить к нему задержку:

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

Ответ 2

Чистое решение javascript с функция scrollIntoView():

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

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

Ответ 3

Для этого есть плагин jquery. Он прокручивает документ к определенному элементу, так что он будет идеально расположен в середине области просмотра. Он также поддерживает облегчение анимации, чтобы эффект прокрутки выглядел супер гладким. Проверьте эту ссылку.

В вашем случае код

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

Ответ 4

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

jquery-animate-body-for-all-browsers.

Ответ 5

попробуйте со следующим кодом. введите элементы с именем класса page-scroll и сохраните идентификационное имя 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();
    });