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

페이지 로드 시 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() 함수가 있는 순수 자바스크립트 솔루션:

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

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

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

사용 중지 알림: ThejQuery.browser속성이 jQuery 1.9에서 제거되었습니다.자세한 내용은 문서를 참조하십시오. https://api.jquery.com/jQuery.browser/

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

출처: jQuery 모든 브라우저에 대한 애니메이션 본문 스크롤

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

당신의 경우 코드는

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

다음 코드로 시도해 보십시오. 클래스 이름을 사용하여 요소를 만들고 ID 이름을 유지합니다.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();
    });

단순 스크롤의 경우 다음 스타일을 사용합니다.

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

스크롤을 표시할 점 또는 단면을 사용할 스타일 클래스를 사용합니다.

언급URL : https://stackoverflow.com/questions/6682451/animate-scroll-to-id-on-page-load