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

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

여기에 게시 된 답변 -문제에 대한 동일한 솔루션입니다.

편집 : 부드러운 스크롤을 원한다면 JQuery 대답이 매우 좋습니다. 전에는 실제로 본 적이 없었습니다.

명명 된 앵커가 아닌 이유는 무엇입니까?

필요한 속성은 location.hash입니다. 예를 들면 :

location.hash = 'top'; // 이름이 지정된 앵커 "top

dojo 또는 이와 같은 툴킷을 사용하지 않고 멋진 스크롤 애니메이션을 수행하는 방법을 모르겠지만 앵커로 이동하는 데 필요한 경우 location.hash가 수행해야합니다.

(FF3 및 Safari 3.1.2에서 테스트 됨)

위의 futtta의 답장에 댓글을 추가 할 수는 없지만 더 부드러운 스크롤 사용을 위해 다음을 수행합니다.

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

scrollTop (IIRC)은 문서에서 페이지 상단이 스크롤되는 위치입니다. scrollTo는 페이지의 상단이 지정한 위치에 오도록 페이지를 스크롤합니다.

여기서 필요한 것은 자바 스크립트로 조작 된 스타일입니다. div를 화면에서 벗어나 오른쪽에서 스크롤하고 싶다면 div의 left 속성을 페이지 너비로 설정 한 다음 원하는 위치가 될 때까지 몇 초마다 설정 한 양만큼 줄입니다.

이것은 올바른 방향을 가리켜 야합니다.

추가 : 죄송합니다. 별도의 div가 어딘가에서 '튀어 나와'(때때로이 사이트가 그렇듯이), 전체 페이지를 섹션으로 이동하지 않기를 원한다고 생각했습니다. 앵커를 적절히 사용하면 그 효과를 얻을 수 있습니다.

거기에있다 jQuery 플러그인 DOM 요소에 스크롤의 일반적인 경우에 대한,하지만 성능이 문제가되는 경우 (그리고 때하지?), 내가 직접 그 일을 제안했다. 여기에는 두 단계가 포함됩니다.

1. 스크롤하려는 요소의 위치 찾기.
2. 해당 위치로 스크롤합니다.

quirksmode 는 전자의 메커니즘에 대한 좋은 설명을 제공합니다. 내가 선호하는 솔루션은 다음과 같습니다.

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

그것은 어떤 서클에서는 적절한 에티켓이 아닌 null에서 0으로 캐스팅을 사용하지만 나는 그것을 좋아합니다 :) 두 번째 부분은 window.scroll. 따라서 나머지 솔루션은 다음과 같습니다.

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

짜잔!

개인적으로 위의 Josh의 jQuery 기반 답변이 내가 본 것 중 최고라는 것을 알았고 내 응용 프로그램에 완벽하게 작동했습니다 ... 물론 이미 jQuery를 사용하고 있었습니다 ... 확실히 전체 jQ 라이브러리를 포함하지 않았을 것입니다. 하나의 목적.

건배!

편집 : 확인 ...이 게시물을 게시 한 후 불과 몇 초 만 에 내 바로 아래에있는 또 다른 답변을 보았습니다 (편집 후 여전히 내 아래에 있는지 확실하지 않음).

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

이것은 jQuery 버전보다 훨씬 적은 코드로 완벽하게 작동합니다! .scrollIntoView ()라는 JS에 내장 함수가 있다는 것을 몰랐지만 거기에 있습니다! 따라서 멋진 애니메이션을 원한다면 jQuery로 이동하십시오. Quick n 'dirty ... 이걸 사용하세요!

부드러운 스크롤을 위해이 코드가 유용합니다.

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

내가 틀렸다면 정정하지만 질문을 계속 읽고 Angus McCoteup이 요소를 position : fixed로 설정하는 방법을 묻고 있다고 생각합니다.

Angus McCoteup, http://www.cssplay.co.uk/layouts/fixed.html 확인-DIV 가 메뉴처럼 작동하도록하려면 CSS를 살펴보세요.