스크롤 가능한 div의 맨 위로 다시 스크롤합니다.

스크롤 가능한 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;

속성을 참조하십시오.

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

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

이것은 저에게 효과가 있었습니다.

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

저는 이 질문에 대한 기존의 답변을 시도해 보았지만, 그 중 어느 것도 저를 위해 크롬에서 작동하지 않았습니다.효과가 있었던 것은 약간 달랐습니다.

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

스크롤 대상

window.scrollTo(0, 0);

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

scrollTo()로 스크롤합니다.
window.scrollTo(xpos, ypos);
xpos 번호를 입력해야 합니다. x축)으로 입니다.
ypos 번호를 입력해야 합니다.Y축(수직)을 따라 픽셀 단위로 스크롤할 좌표

jQuery

동일한 작업을 수행할 수 있는 또 다른 옵션은 jQuery를 사용하는 것이며 동일한 작업을 보다 원활하게 수행할 수 있습니다.

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

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

2020년 업데이트

사용할 수 있습니다..scroll()요소나 창을 쉽게 스크롤할 수 있습니다.부드러운 스크롤 효과가 내장되어 있어 기본적으로 코드가 더 간단할 수 없습니다.

표준 속성:

var options = {
    top:       0,        // Number of pixels along the Y axis to scroll the window or element
    left:      0,        // Number of pixels along the X axis to scroll the window or element.
    behavior:  'smooth'  // ('smooth'|'auto') - animate smoothly, or move in a single jump
}

DOCS: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

참고 항목: .scrollIntoView() https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

---

데모:

document.getElementById('btn').addEventListener('click',function(){

  document.getElementById('container').scroll({top:0,behavior:'smooth'});
  
});

/*DEMO*/
#container{
  width: 300px;
  max-height: 300px;
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #222;
  color: #ccc;
  text-align: justify;
  overflow-y: auto;
}
#btn{
  width: 100%;
  margin-top: 1rem;
}

<div id="container">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <button id="btn">Scroll to top</button>
</div>

여전히 이 작업을 수행할 수 없는 사용자의 경우 jQuery 기능을 사용하기 전에 오버플로된 요소가 표시되는지 확인합니다.

예:

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

클래스 이름으로 요소를 가져올 때 반환 값이 배열이라는 것을 잊지 마십시오. 따라서 이 코드는 다음과 같습니다.

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

작동하지 않을 것입니다.대신 아래 코드를 사용합니다.

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

저는 다른 사람들도 저와 비슷한 문제에 직면할 수 있다고 생각했습니다. 그래서 이것은 효과가 있을 것입니다.

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

(바닐라 JS)

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

만약 당신의 목표 사용자가 크롬과 파이어폭스라면, 이것은 좋습니다!그러나 안타깝게도 이 방법은 모든 브라우저에서 충분히 지원되지 않습니다.여기서 확인

이것이 도움이 되길 바랍니다!!

스크롤 Topway가 작동하지 않지만 다른 방법을 찾았습니다.

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

신뢰할 수 있는 CSS 렌더링을 위한 최소 시간을 확인하지 않았지만 100ms는 오버킬일 수 있습니다.

프랑수아 노엘의 대답에 따르면 "아직도 이 작업을 할 수 없는 사람들은 jQuery 함수를 사용하기 전에 오버플로된 요소가 표시되는지 확인하십시오."

저는 부트스트랩 모달에서 작업을 해왔고, 그들의 차원에서 넘쳐나는 div에서 계정 권한을 반복적으로 제기했습니다.제 문제는 jquery.scrollTop(0) 함수를 사용하려고 했는데 어떻게 해도 작동하지 않는다는 것입니다.저는 모달에 대한 이벤트를 설정해야 했습니다. 모달이 애니메이션을 중지할 때까지 스크롤바를 재설정하지 않았습니다.마침내 저에게 적용된 코드는 다음과 같습니다.

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

이것이 부드러운 스크롤 전환과 함께 제게 효과가 있는 유일한 방법입니다.

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

ID S는 오버플로 CSS 속성을 가진 해당 div의 id를 가져야 합니다.

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

HTML 콘텐츠가 단일 뷰포트를 오버플로우하면 자바스크립트만 사용하여 작동했습니다.

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

안부 전해요,

이 두 코드는 나에게 매력적으로 작용했습니다. 첫 번째 코드는 페이지 맨 위로 스크롤하는 데 필요합니다. 하지만 만약 당신이 특정 디바이드로 스크롤하고 싶다면 두 번째 코드를 당신의 디바이드로 사용하세요.

$('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);

언급URL : https://stackoverflow.com/questions/10744299/scroll-back-to-the-top-of-scrollable-div