it-swarm-ko.tech

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

긴 HTML 페이지에 링크가 있습니다. 클릭하면 페이지의 다른 부분에있는 div가 화면으로 스크롤되어 창에 표시되기를 바랍니다.

다른 언어에서는 EnsureVisible와 비슷합니다.

scrollTopscrollTo을 (를) 확인했지만 붉은 청어처럼 보입니다.

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

97
Angus McCoteup

오래된 질문이지만 누군가가 구글을 통해 이것을 찾은 경우 누가 앵커 또는 jquery를 사용하고 싶지 않은지; 요소에 '점프'하기위한 내장 자바 스크립트 함수가 있습니다.

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

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

369
futtta

추가 확장자를 추가하지 않으려면 다음 코드가 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;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

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

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

15
mjallday

스크롤하기 어려운 점은 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);
  }
}
8
levik

이것은 나를 위해 일했다

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

위에서 언급 한대로 Element.scrollIntoView() 메소드를 사용할 수 있습니다. 내부에 매개 변수가없는 상태로두면 instant ugly scroll입니다. 이 매개 변수를 추가하지 못하게하려면-behavior:"smooth".

예:

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

scroll-here-plz을 (를) 웹 사이트의 div 또는 요소와 함께 사용하십시오. 창 하단에 요소가 보이거나 원하는 위치가 아닌 경우 매개 변수 block: "". 당신이 사용할 수있는 block: "start", block: "end" 또는 block: "center".

기억하십시오 : 항상 객체 {} 안에 매개 변수를 사용하십시오.

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

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

6
Smelino

답변 게시 here -문제에 대한 동일한 솔루션.

편집 : 부드러운 스크롤을 원한다면 JQuery 답변이 매우 좋습니다. 전에는 실제로 보지 못했습니다.

5
Chuck

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

4
Bloodhound

필요한 속성은 location.hash입니다. 예를 들면 다음과 같습니다.

location.hash = 'top'; // 명명 된 앵커로 이동

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

(FF3 및 Safari 3.1.2에서 테스트)

4
Scott Swezey

위의 futtta의 답변에 주석을 추가 할 수는 없지만 더 부드러운 스크롤 사용을 위해 :

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

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

$('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;
      }
    }
  });
0
Swarnendu Paul

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

건배!

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

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

이것은 jQuery 버전보다 완벽하고 훨씬 적은 코드로 작동합니다! JS에 .scrollIntoView ()라는 내장 함수가 있다는 것을 몰랐지만 거기에 있습니다! 멋진 애니메이션을 원한다면 jQuery로 가십시오. 빨리 더럽다 ... 이것을 사용하십시오!

0
Lelando

DOM 요소로 스크롤하는 일반적인 경우에는 jQuery plugin 이 있지만 성능에 문제가있는 경우 (그리고 그렇지 않은 경우) 수동으로 수행하는 것이 좋습니다. 여기에는 두 단계가 포함됩니다.

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

짜잔!

0
Andrey Fedorov

scrollTop (IIRC)은 문서에서 페이지 상단이 스크롤되는 곳입니다. scrollTo 페이지 상단이 사용자가 지정한 위치에 있도록 페이지를 스크롤합니다.

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

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

추가 : 죄송합니다. 별도의 div가 (어쩌면이 사이트와 같은 경우) 어딘가에서 '튀어 나와서'전체 페이지를 섹션으로 옮기지 않기를 원한다고 생각했습니다. 앵커를 올바르게 사용하면 그 효과를 얻을 수 있습니다.

0
Benjamin Autin