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

Question

Я пытаюсь анимировать прокрутку к определенному идентификатору при загрузке страницы.Я провел много исследований и наткнулся на это:

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

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

HTML (что на полпутивниз по странице) это просто:

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

Answer 1

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

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

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

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

Answer 2

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

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

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

P.S. Параметр 'smooth' теперь работает с Chrome 61 как julien_c , упомянутый в комментариях.

Answer 3

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

JQuery-одушевленное тело-для-всех-браузеров .

Answer 4

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

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

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

Answer 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();
    });

Answer 6

для простой прокрутки, используйте следующий стиль

высота: 200 пикселей; переполнение: прокрутка;

и используйте этот класс стилей, который div или раздел вы хотите показать scroll