질문 목록이 있다고 생각하십시오. 첫 번째 질문을 클릭하면 자동으로 페이지 하단으로 이동합니다.
실제로 jQuery를 사용 하여이 작업을 수행 할 수 있음을 알고 있습니다.
그렇다면이 질문에 대한 답변을 찾을 수있는 문서 나 링크를 제공해 주시겠습니까?
편집 : 페이지 하단의 특정 HTML 요소 로 스크롤해야 합니다.
답변
jQuery는 필요하지 않습니다. Google 검색에서 얻은 최고의 결과는 대부분 다음과 같은 답변을 제공합니다.
window.scrollTo(0,document.body.scrollHeight);중첩 된 요소가있는 경우 문서가 스크롤되지 않을 수 있습니다. 이 경우 스크롤하는 요소를 대상으로 지정하고 대신 스크롤 높이를 사용해야합니다.
window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);
onclick질문 이있는 이벤트 (예 :)에이를 연결할 수 있습니다 <div onclick="ScrollToBottom()" ....
살펴볼 수있는 몇 가지 추가 소스 :
답변
전체 페이지를 맨 아래로 스크롤하려는 경우 :
var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;요소를 맨 아래로 스크롤하려면 다음을 수행하십시오.
function gotoBottom(id){
var element = document.getElementById(id);
element.scrollTop = element.scrollHeight - element.clientHeight;
}그리고 그것이 작동하는 방식입니다.
참조 : scrollTop , scrollHeight , clientHeight
업데이트 : 최신 버전의 Chrome (61+) 및 Firefox는 본문 스크롤을 지원하지 않습니다. https://dev.opera.com/articles/fixing-the-scrolltop-bug/
답변
바닐라 JS 구현 :
element.scrollIntoView(false);https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
답변
이것을 사용하여 애니메이션 형식으로 페이지를 내려갈 수 있습니다.
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");답변
아래는 크로스 브라우저 솔루션이어야합니다. Chrome, Firefox, Safari 및 IE11에서 테스트되었습니다.
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);window.scrollTo (0, document.body.scrollHeight); Firefox 37.0.2 이상에서는 Firefox에서 작동하지 않습니다.
답변
때로는 페이지가 buttom으로 스크롤 할 때 (예 : 소셜 네트워크에서) 끝까지 아래로 스크롤하기 위해 (페이지의 궁극적 인 buttom)이 스크립트를 사용합니다.
var scrollInterval = setInterval(function() {
document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);브라우저의 자바 스크립트 콘솔에있는 경우 스크롤을 중지 할 수 있으므로 다음을 추가하십시오.
var stopScroll = function() { clearInterval(scrollInterval); };그런 다음 사용 stopScroll(); .
특정 요소로 스크롤해야하는 경우 다음을 사용하십시오.
var element = document.querySelector(".element-selector");
element.scrollIntoView();또는 특정 요소로 자동 스크롤하기위한 범용 스크립트 (또는 페이지 스크롤 간격 중지) :
var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
var element = document.querySelector(".element-selector");
if (element) {
// element found
clearInterval(scrollInterval);
element.scrollIntoView();
} else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) {
// no element -> scrolling
notChangedStepsCount = 0;
document.documentElement.scrollTop = document.documentElement.scrollHeight;
} else if (notChangedStepsCount > 20) {
// no more space to scroll
clearInterval(scrollInterval);
} else {
// waiting for possible extension (autoload) of the page
notChangedStepsCount++;
}
}, 50);답변
이 기능을 호출해야 할 때마다 사용할 수 있습니다.
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}