jQuery 페이지 하단/iframe으로 스크롤

jQuery 페이지 하단/iframe으로 스크롤

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

이 스레드가 특정 요구사항(특정 요소, 텍스트 영역 내에서 스크롤)에 적합하지 않은 후에 저는 이 문제를 훨씬 더 멀리서 발견했습니다. 이 문제는 이 토론을 읽는 다른 사용자에게 도움이 될 수 있습니다.

플래닛 클라우드의 대안

이미 내 jQuery 개체의 캐시된 버전을 가지고 있었기 때문에.myPanel아래 코드는 jQuery 객체)입니다. 이벤트 핸들러에 추가한 코드는 다음과 같습니다.

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

(고마워 벤)

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

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

애니메이션에 관심이 없다면 요소의 높이를 알 필요가 없습니다.적어도 내가 시도한 모든 브라우저에서, 만약 당신이 제공한다면.scrollTop최대값보다 큰 숫자는 맨 아래로 스크롤됩니다.그래서 가능한 한 가장 큰 숫자를 지정합니다.

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

스크롤 막대가 있는 요소 대신 페이지를 스크롤하려면 다음을 수행합니다.myScrollingElementbody, html'과 같습니다.

여러 곳에서 이 작업을 수행해야 하기 때문에 다음과 같이 빠르고 더러운 jQuery 함수를 작성했습니다.

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

그래서 나는 많은 것들을 추가할 때 이것을 할 수 있습니다:

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

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

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

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

나는 이 코드를 사용하여 새로운 메시지가 도착할 때 채팅을 스크롤합니다.

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

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

또는

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

Chrome에서는 작동하지 않고 Safari에서는 작동하지 않습니다. htmlCSS의 태그가 있습니다.overflow: auto;재산의 집합그걸 알아내는 데 거의 한 시간이 걸렸습니다.

언급URL : https://stackoverflow.com/questions/1890995/jquery-scroll-to-bottom-of-page-iframe