[javascript] 긴 페이지를 DIV로 스크롤하는 JavaScript

Program / 글쓴이

긴 HTML 페이지에 링크가 있습니다. 클릭하면div 하면 페이지의 다른 부분을 스크롤하여 창에 표시하고 .

EnsureVisible다른 언어 와 비슷 합니다.

나는 체크 아웃 scrollTop했고scrollTo 하지만 그들은 붉은 청어처럼 보인다.

누구든지 도울 수 있습니까?

답변

오래된 질문이지만 누군가가 Google을 통해 이것을 발견하고 앵커 또는 jquery를 사용하고 싶지 않은 사람이 있다면; 요소로 ‘점프’하는 내장 자바 스크립트 함수가 있습니다.

document.getElementById('youridhere').scrollIntoView();

그리고 더 나은 것; quirksmode의 훌륭한 호환성 표에 따르면, 이것은 모든 주요 브라우저에서 지원됩니다 !

답변

추가 확장을 추가하지 않으려면 다음 코드가 jQuery에서 작동해야합니다.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

답변

JQuery ScrollTo 는 어떻습니까 -이 샘플 코드보기

답변

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

멋진 스크롤은 아니지만 거기로 이동해야합니다.

답변

스크롤링의 어려움은 div를 표시하기 위해 페이지를 스크롤해야 할뿐만 아니라 여러 레벨에서 스크롤 가능한 div 내부로 스크롤해야 할 수도 있다는 것입니다.

scrollTop 속성은 문서 본문을 포함한 모든 DOM 요소에서 사용할 수 있습니다. 이를 설정하면 스크롤되는 범위를 제어 할 수 있습니다. clientHeight 및 scrollHeight 속성을 사용하여 필요한 스크롤 양을 확인할 수도 있습니다 (clientHeight (뷰포트)가 scrollHeight (콘텐츠 높이)보다 작을 때 스크롤이 가능합니다.

또한 offsetTop 속성을 사용하여 컨테이너에서 요소가있는 위치를 파악할 수 있습니다.

진정한 범용 “보기로 스크롤”루틴을 처음부터 빌드하려면 노출하려는 노드에서 시작하고 부모의 보이는 부분에 있는지 확인한 다음 부모에 대해 동일한 작업을 반복해야합니다. 당신이 정상에 도달 할 때까지 길.

이 단계의 한 단계는 다음과 같습니다 (엣지 케이스를 확인하지 않고 코드를 확인하지 않음).

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

답변

Element.scrollIntoView()위에서 언급 한 방법을 사용할 수 있습니다 . 내부에 매개 변수가없는 상태로두면 즉시 못생긴 스크롤이 나타납니다 . 이 매개 변수를 추가 할 수 없도록하려면- behavior:"smooth".

예:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

웹 사이트에서 scroll-here-plz귀하의 div또는 요소로 바꾸 십시오 . 창 하단에 요소가 표시되거나 위치가 예상 한 것과 다른 경우 parameter를 사용하여 재생하십시오 block: "". block: "start", block: "end"또는을 사용할 수 있습니다 block: "center".

알아두기 : 항상 {} 개체 내에서 매개 변수를 사용하십시오.

여전히 문제가 있으면 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView 로 이동 하십시오.

이 방법에 대한 자세한 문서가 있습니다.

답변

이것은 나를 위해 일했습니다.

document.getElementById('divElem').scrollIntoView();