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;

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은 픽셀의 수직 스크롤바 위치를 지정하고 두 번째 매개 변수는 작업을 완료하는 데 걸리는 시간을 마이크로 초 단위로 표시하는 선택적 매개 변수입니다.

---

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

예 :

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

---

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

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

---

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

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

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

---

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

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

문안 인사,

---

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

(바닐라 JS)

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

If your target users are Chrome and Firefox, then this is good! But unfortunately this method isn’t supported well enough on all browsers. Check Here

Hope this helps!!

---

As per François Noël's answer "For those who still can't make this work, make sure that the overflowed element is displayed before using the jQuery function."

I had been working in a bootstrap modal that I repeatedly bring up with account permissions in a div that overflows on the y dimension. My problem was, I was trying to use the jquery .scrollTop(0) function and it would not work no matter how I tried to do it. I had to setup an event for the modal that didn't reset the scrollbar until the modal had stopped animating. The code that finally worked for me is here:

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

---

these two codes worked for me like a charm this first will take to scroll to the top of the page but if you want to scroll to some specific div use the second one with your div id.

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

If you want to scroll to by a class name use the below code

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

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

---

This is the only way it worked for me, with smooth scrolling transition:

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

---

When getting element by class name, don't forget the return value is an array; Hence this code:

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

Would not work. Use code below instead.

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

I figured other people might encounter a similar problem as I did; so this should do the trick.

참고URL : https://stackoverflow.com/questions/10744299/scroll-back-to-the-top-of-div