페이지로드시 ID로 스크롤 애니메이션

페이지로드시 특정 ID로 스크롤을 애니메이션화합니다. 나는 많은 연구를 수행했고 이것을 발견했습니다.

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

그러나 이것은 ID에서 시작하여 페이지 상단으로 애니메이션되는 것 같습니다.

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);

scrollIntoView () 함수를 사용하는 순수 자바 스크립트 솔루션 :

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

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

PS 'smooth'매개 변수는 이제 주석에 언급 된 julien_c와 같이 Chrome 61에서 작동합니다 .

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

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

이를위한 jquery 플러그인이 있습니다. 문서를 특정 요소로 스크롤하여 뷰포트의 중앙에 완벽하게 배치됩니다. 또한 스크롤 효과가 매우 부드럽게 보이도록 애니메이션 이징을 지원합니다. 이 링크 확인 .

귀하의 경우 코드는

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

다음 코드로 시도하십시오. 페이지 스크롤 클래스 이름으로 요소를 만들고 href해당 링크의 ID 이름을 유지 합니다.

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

간단한 Scroll의 경우 다음 스타일을 사용하십시오.

높이 : 200px; 오버플로 : 스크롤;

스크롤을 표시하려는 div 또는 섹션이 스타일 클래스를 사용하십시오.