[javascript] 스크롤 가능한 div의 맨 위로 스크롤

<div id="containerDiv"></div>

#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}

document.getElementById("containerDiv").innerHTML = variableLongText;

다음 번에 컨테이너 div의 맨 위로 스크롤 위치를 재설정하는 방법은 무엇입니까?

답변

var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

scrollTop속성을 참조하십시오 .

답변

부드러운 애니메이션으로하는 또 다른 방법은 다음과 같습니다.

$("#containerDiv").animate({ scrollTop: 0 }, "fast");

답변

이 질문에 대한 기존 답변을 시도했지만 아무도 Chrome에서 나를 위해 일하지 않았습니다. 작업은 약간 달랐습니다.

$('body, html, #containerDiv').scrollTop(0);

답변

scrollTo

window.scrollTo(0, 0);

창을 맨 위로 스크롤하기위한 궁극적 인 솔루션입니다. 가장 좋은 부분은 ID 선택기가 필요하지 않으며 IFRAME 구조를 사용하더라도 매우 잘 작동한다는 것입니다.

scrollTo () 메서드는 문서를 지정된 좌표로 스크롤합니다.
window.scrollTo (xpos, ypos);
xpos 번호가 필요합니다. x 축 (가로)을 따라 스크롤 할 좌표 (픽셀 단위)
ypos 숫자 필수입니다. Y 축 (세로)을 따라 스크롤 할 좌표 (픽셀 단위)

jQuery

동일한 작업을 수행하는 또 다른 옵션은 jQuery를 사용하는 것입니다.

$('html,body').animate({scrollTop: 0}, 100);

여기서 scrollTop 뒤의 0은 픽셀의 수직 스크롤바 위치를 지정하고 두 번째 매개 변수는 작업을 완료하는 데 걸리는 시간을 마이크로 초 단위로 표시하는 선택적 매개 변수입니다.

답변

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

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

답변

여전히이 작업을 수행 할 수없는 경우 jQuery 함수를 사용하기 전에 오버플로 된 요소가 표시 되는지 확인하십시오 .

예 :

$('#elem').show();
$('#elem').scrollTop(0);

답변

나를 위해 scrollTop 방식은 작동하지 않았지만 다른 것을 찾았습니다.

element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);

안정적인 CSS 렌더링을위한 최소 시간을 확인하지 않았지만 100ms는 과도 할 수 있습니다.