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


123

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

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

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

HTML (페이지 중간에 있음)은 다음과 같습니다.

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

1
이것은 답이별로 없지만 Ariel Flesler의 "scrollTo"플러그인을 강력히 추천합니다. 페이지에 대해 패닝하기위한 많은 기능과 일반적인 경우를위한 플러그인에 대한 몇 가지 확장 기능이 있습니다 (예를 들어, 동일한 페이지에있는 경우 링크의 href로 스크롤하는 데 유용한 "LocalScroll"플러그인을 찾을 수 있습니다). 플러그인은 여기에서 얻을 수 있습니다 : flesler.blogspot.com/2007/10/jqueryscrollto.html
Faisal

답변:


327

요소의 높이 만 스크롤합니다. offset () 은 문서를 기준으로 한 요소의 좌표를 반환하고 topparam은 y 축을 따라 요소의 거리를 픽셀 단위로 제공합니다.

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

또한 지연을 추가 할 수도 있습니다.

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

1
"WOW COOL !!"이되는 자동 스크롤은 무엇입니까? 솔루션의 단순성 때문일 수 있습니다.
theblang 2013-04-02

페이지로드시 요소를보기로 스크롤해야했지만 두 가지 문제가있었습니다. a) "html, body"를 사용하여 두 개의 콜백 (일치하는 각 요소에 대해 하나씩)을 제공했습니다. b) 본문 또는 html 중 어느 것이 작동하는지 브라우저에 따라 다릅니다. 그래서 저는 여러분의 프로젝트에서 스크롤 인 투 뷰가 "모든"브라우저에서 작동하는지 확인하고 애니메이션이 끝날 때 하나의 콜백 만 받게 될 것이라는 요점을 만들었습니다. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964 2014-08-29

2
이것은 정말 정확하지 않습니다. 우리가하려는 본문이나 요소의 현재 스크롤 위치를 정말로 고려해야합니다 scroll. 이를 염두에두고의 현재 스크롤 위치를 보기에서 원하는 요소 bodyoffset().top위치에 추가합니다 . 결과 합계는 스크롤하려는 값입니다. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
mattdevio

@magreenberg 이것을 시도해 보셨습니까? 현재 스크롤 위치가 값 0보다 큰 경우 제안한 내용이 작동하지 않을 수 있습니다. 스크롤 가능한 컨테이너의 높이가 1000 픽셀이고 현재 스크롤 위치가 1000이라고 가정 해 봅시다. 스크롤하려는 요소가 500의 세로 중앙에 있다고 가정 해 봅시다. 제안하는 내용은 1500으로 스크롤하라고 말할 것입니다. , 권리?
BumbleB2na

이 경우 @ BumbleB2na .offset().top는 음수를 제공합니다. 그리고 이것은 정말에만 작동 body하고 html있기 때문에이 offset().top당신에게 오프셋 (offset) 문서 상단을 줄 것입니다 아닌 부모 스크롤 예정.
mattdevio

12

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

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>

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


1
지금 작동 (Chrome 61에서)
julien_c

브라우저 호환성을 확인하십시오. 2018 년 10 월 현재 IE (11), Edge 및 Safari는 "scrollIntoView"를 지원하지만 "smooth"옵션은 지원하지 않습니다.
metal_jacke1

순수 JS ftw. 스 니펫 감사합니다! 더블 버터 크림처럼 부드러움
jean d' arme


3

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

귀하의 경우 코드는

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

"또한 스크롤 효과가 매우 부드러워 보이도록 애니메이션 이징을 지원합니다."안타깝게도 이는 사실이 아닙니다. 컴퓨터가 어떤 이유로 느린 경우 실제로 제대로 움직이지 않고 계속 점프합니다.
brunoais

부드러운 스크롤을 위해서는 많은 픽셀을 계산해야합니다. 물론 느린 "컴퓨터"(더 많은 GPU)는이를 수행 할 수 없지만 충분한 ALU가 부족하기 때문입니다. 그래서 일반적으로 그는 옳습니다. 그리고 정말 쉬운 스크롤 lib.
Roland

1

다음 코드로 시도하십시오. 페이지 스크롤 클래스 이름으로 요소를 만들고 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();
    });

-3

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

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

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.