페이지 / iframe의 맨 아래로 jQuery 스크롤

jquery를 사용하여 iframe 또는 페이지의 맨 아래로 오른쪽으로 스크롤하는 방법은 무엇입니까?

멋진 느린 애니메이션 스크롤을 원할 경우 앵커가 href="#bottom"있으면 맨 아래로 스크롤됩니다.

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

선택기를 자유롭게 교체하십시오.

scrollTop ()은 스크롤 가능 영역에서 보이지 않는 픽셀 수를 반환하여 다음과 같이 지정합니다.

$(document).height()

실제로 페이지 하단을 초과합니다. 스크롤이 실제로 페이지 하단에서 '정지'하려면 브라우저 창의 현재 높이를 빼야합니다. 필요한 경우 여유를 사용할 수 있으므로 다음과 같이됩니다.

$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);

예를 들면 다음과 같습니다.

$('html, body').scrollTop($(document).height());

이 스레드가 특정 요구 (내 경우에는 텍스트 영역 내에서 스크롤)에 대해 나에게 적합하지 않은 후에이 문제를 크게 발견하여 다른 사람 이이 토론을 읽는 데 도움이 될 수 있습니다.

Planetcloud의 대안

캐시 된 버전의 jQuery 객체 ( myPanel아래 코드의 jQuery 객체)가 이미 있으므로 이벤트 핸들러에 추가 한 코드는 다음과 같습니다.

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(벤 감사합니다)

전체 페이지의 맨 아래로 이동 (즉시 스크롤)되는 간단한 기능입니다. 내장을 사용합니다 .scrollTop(). 개별 페이지 요소와 함께 작동하도록 이것을 조정하지 않았습니다.

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

이것은 나를 위해 일했다 :

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

애니메이션에 신경 쓰지 않으면 요소의 높이를 얻을 필요가 없습니다. 적어도 내가 시도한 모든 브라우저 scrollTop에서 최대 값보다 큰 숫자를 제공 하면 맨 아래로 스크롤됩니다. 따라서 가장 큰 숫자를 지정하십시오.

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

스크롤 막대가있는 요소가 아닌 페이지를 스크롤하려면 myScrollingElement'body, html'과 동일하게 만드십시오 .

여러 곳 에서이 작업을 수행해야하므로 다음과 같이보다 편리하게 만들기 위해 빠르고 더러운 jQuery 함수를 작성했습니다.

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

그래서 한 묶음 물건을 추가 할 때이 작업을 수행 할 수 있습니다.

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

이전 답변에서 언급 한 스크립트는 다음과 같습니다.

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

또는

$(window).scrollTop($(document).height());

작동하지 않습니다 에 크롬 과에 불안해 할 것이다 사파리 의 경우에 html 태그 CSS는 이 overflow: auto;속성이 설정. 알아내는 데 거의 한 시간이 걸렸습니다.

$('.block').scrollTop($('.block')[0].scrollHeight);

새 코드가 도착하면이 코드를 사용하여 채팅을 스크롤합니다.