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

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

---

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

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

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

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