스크롤 가능한 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는 과도 할 수 있습니다.

부드러운 전환으로 스크롤하려면 이것을 사용할 수 있습니다!

(바닐라 JS)

const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 80
});

대상 사용자가 Chrome 및 Firefox 인 경우 좋습니다! 그러나 안타깝게도이 방법은 모든 브라우저에서 충분히 지원되지는 않습니다. 여기에서 확인

도움이 되었기를 바랍니다!!

François Noël의 대답에 따르면 "아직도이 작업을 수행 할 수없는 사람들을 위해 jQuery 함수를 사용하기 전에 오버플로 된 요소가 표시되는지 확인하십시오."

나는 부트 스트랩 모달에서 작업하고 있었는데,이 모달은 y 차원에서 오버플로되는 div에서 계정 권한을 반복적으로 가져 왔습니다. 내 문제는 jquery .scrollTop (0) 함수를 사용하려고 시도했지만 어떻게 시도해도 작동하지 않는다는 것입니다. 모달 애니메이션이 중지 될 때까지 스크롤바를 재설정하지 않는 모달에 대한 이벤트를 설정해야했습니다. 마침내 나를 위해 일한 코드는 다음과 같습니다.

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });

html 콘텐츠가 단일 뷰포트를 오버플로하면 javascript 만 사용하여 저에게 효과적이었습니다.

document.getElementsByTagName('body')[0].scrollTop = 0;

문안 인사,

이것은 부드러운 스크롤 전환으로 나를 위해 일한 유일한 방법입니다.

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);

클래스 이름으로 요소를 가져올 때 반환 값이 배열임을 잊지 마십시오. 따라서이 코드 :

document.getElementByClassName("dropdown-menu").scrollTop = 0

작동하지 않습니다. 대신 아래 코드를 사용하십시오.

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

다른 사람들이 저와 비슷한 문제를 겪을 수 있다고 생각했습니다. 그래서 이것은 트릭을 할 것입니다.

이 두 코드는 나를 위해 매력적으로 작동했습니다.이 첫 번째는 페이지 상단으로 스크롤하는 데 필요하지만 특정 div로 스크롤하려면 div ID와 함께 두 번째 코드를 사용하십시오.

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

클래스 이름으로 스크롤하려면 아래 코드를 사용하십시오.

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

ID에는 오버플로 CSS 속성이있는 해당 div의 ID가 있어야합니다.

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;