자동으로 페이지 하단으로 스크롤

해결법

1.jQuery를 필요가 없습니다. 내가 구글 검색에서 얻은 최고 결과의 대부분은 저에게이 대답을했다 :

jQuery를 필요가 없습니다. 내가 구글 검색에서 얻은 최고 결과의 대부분은 저에게이 대답을했다 :
```
window.scrollTo(0,document.body.scrollHeight);
```
중첩 된 요소를 가질 경우, 문서를 스크롤 할 수 있습니다. 이 경우 요소를 대상으로 스크롤하는 대신 그것의 스크롤 높이를 사용해야합니다.

window.scrollTo (0, document.querySelector ( "scrollingContainer.") scrollHeight.);

당신은 (... 즉

일부 추가 소스는보고에서 수행 할 수 있습니다
2.당신은 아래로 전체 페이지를 스크롤하려면 :

당신은 아래로 전체 페이지를 스크롤하려면 :
```
var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
```
JSFiddle에 샘플을 참조하십시오

당신은 아래로 요소를 이동하려면 :
```
function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}
```
어떻게 작동하는지 그리고는 다음과 같습니다

참고 : scrollTop, scrollHeight, clientHeight

UPDATE가 크롬 (에서 61)와 파이어 폭스의 최신 버전은 몸의 스크롤을 지원하지 않습니다, 참조 : https://dev.opera.com/articles/fixing-the-scrolltop-bug/
3.바닐라 JS 구현 :

바닐라 JS 구현 :
```
element.scrollIntoView(false);
```
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
4.당신은 애니메이션 형식으로 페이지를 아래로 이동하려면이 옵션을 사용할 수 있습니다.

당신은 애니메이션 형식으로 페이지를 아래로 이동하려면이 옵션을 사용할 수 있습니다.
```
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
```
5.다음은 크로스 브라우저 솔루션이 될 것이다. 그것은 크롬, 파이어 폭스, 사파리 및 IE11에서 테스트되었습니다

다음은 크로스 브라우저 솔루션이 될 것이다. 그것은 크롬, 파이어 폭스, 사파리 및 IE11에서 테스트되었습니다
```
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
```
window.scrollTo (0, document.body.scrollHeight); 파이어 폭스 37.0.2을 위해 적어도, 파이어 폭스에서 작동하지 않습니다

6.때때로 페이지, 나는이 스크립트를 사용 끝에 (페이지 궁극적 아래) 아래로 스크롤 (소셜 네트워크의 예를 들어) 아래로 스크롤에 확장 :

때때로 페이지, 나는이 스크립트를 사용 끝에 (페이지 궁극적 아래) 아래로 스크롤 (소셜 네트워크의 예를 들어) 아래로 스크롤에 확장 :

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

7.당신이 그것을 호출 할 필요가 어디든지이 기능을 사용할 수 있습니다 :

당신이 그것을 호출 할 필요가 어디든지이 기능을 사용할 수 있습니다 :
```
function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}
```
jquery.com : ScrollTo
8.당신이 애니메이션도이 작업을 수행 할 수 있습니다, 매우 간단합니다

당신이 애니메이션도이 작업을 수행 할 수 있습니다, 매우 간단합니다
```
$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');
```
희망이 도움이 감사합니다
9.하나의 라이너가 아래쪽으로 스크롤을 원활

하나의 라이너가 아래쪽으로 스크롤을 원활
```
window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
```
0 단순히 셋톱를 스크롤하려면
10.당신은 링크 요소의 참조 속성 href가 어떤 ID를 첨부 할 수 있습니다 :

당신은 링크 요소의 참조 속성 href가 어떤 ID를 첨부 할 수 있습니다 :
```
<a href="#myLink" id="myLink">
    Click me
</a>
```
사용자가 클릭 페이지 하단에있는 저를 클릭하면 위의 예에서, 내비게이션를 탐색 나에게 자신을 클릭합니다.
11.당신은 젠틀 앵커에게 좋은의 자바 스크립트 플러그인을 시도 할 수 있습니다.

당신은 젠틀 앵커에게 좋은의 자바 스크립트 플러그인을 시도 할 수 있습니다.

예:
```
function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}
```
호환성 테스트 :
12.늦게 파티에,하지만 여기 아래로 모든 요소를 스크롤 할 수있는 몇 가지 간단한 자바 스크립트 전용 코드는 다음과 같습니다

늦게 파티에,하지만 여기 아래로 모든 요소를 스크롤 할 수있는 몇 가지 간단한 자바 스크립트 전용 코드는 다음과 같습니다
```
function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}
```
13.코드 아래 셀레늄 사용 스크롤 아래의 경우 :

코드 아래 셀레늄 사용 스크롤 아래의 경우 :

페이지의 높이까지 아래 드롭 다운, 스크롤까지. 모두, 자바 스크립트에서 잘 작동하고 어떻게 반응 아래의 자바 스크립트 코드를 사용합니다.
```
JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");
```
14.이렇게 많은 답변이 문서의 높이를 계산하려고합니다. 그러나 그것은 나를 위해 제대로 계산되지 않았습니다. 그러나이 두 가지 일 :

이렇게 많은 답변이 문서의 높이를 계산하려고합니다. 그러나 그것은 나를 위해 제대로 계산되지 않았습니다. 그러나이 두 가지 일 :

JQuery와
```
    $('html,body').animate({scrollTop: 9999});
```
아니면 그냥 JS
```
    window.scrollTo(0,9999);
```

15.여기 내 솔루션입니다 :

여기 내 솔루션입니다 :

 //**** scroll to bottom if at bottom

 function scrollbottom() {
    if (typeof(scr1)!='undefined') clearTimeout(scr1)   
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
    scr1=setTimeout(function(){scrollbottom()},200) 
 }
 scr1=setTimeout(function(){scrollbottom()},200)

16.이것은 아래로 스크롤을 보장합니다

이것은 아래로 스크롤을 보장합니다

헤드 코드

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function scrollToBottom() {
  $('#html, body').scrollTop($('#html, body')[0].scrollHeight);
}
</script>

바디 코드

<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">&#9660; Bottom &#9660;</a>

17.그림은 가치가 천 개 단어입니다 :

그림은 가치가 천 개 단어입니다 :

핵심은 다음과 같습니다
```
document.documentElement.scrollTo({
  left: 0,
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
});
```
이것은 요소 document.documentElement를 사용한다. 그것은에는 document.body 및 document.documentElement를 변경 거라고 제외하고는 단지 다음과 같이 작동, 그냥 창을 사용하여 유사하지만 전체 페이지 만 컨테이너가 아닌 경우 때문에, 이런 식으로 할 그냥 내 개인적인 취향 document.querySelector ( "# 컨테이너-ID").

하자 cLines = 0; () {(timerId가 = setInterval을 기능을 할 수 elSomeContent = document.createElement ( "DIV")를 보자; 경우 (++ cLines> 33) { 됨 clearInterval (timerId가); elSomeContent.innerText는 = "그것은 모든 사람이야!"; } 다른 { elSomeContent.innerText는 새 Date (). toLocaleDateString ( "EN"를, {= DateStyle의 "긴" timeStyle : "중간" }); } document.body.appendChild (elSomeContent); document.documentElement.scrollTo ({ 왼쪽 : 0, 맨 : document.documentElement.scrollHeight - document.documentElement.clientHeight을, 행동 : '부드럽게' }); } 1000); 몸 { 폰트 : 27px 굴림, 산세 리프; 배경 : #ffc; 색상 : # 333; }

더 scrollTo ()가없는 경우의 차이를 비교할 수 있습니다 :

하자 cLines = 0; () {(timerId가 = setInterval을 기능을 할 수 elSomeContent = document.createElement ( "DIV")를 보자; 경우 (++ cLines> 33) { 됨 clearInterval (timerId가); elSomeContent.innerText는 = "그것은 모든 사람이야!"; } 다른 { elSomeContent.innerText는 새 Date (). toLocaleDateString ( "EN"를, {= DateStyle의 "긴" timeStyle : "중간" }); } document.body.appendChild (elSomeContent); } 1000); 몸 { 폰트 : 27px 굴림, 산세 리프; 배경 : #ffc; 색상 : # 333; }

18.간단한 방법으로 특정 요소를 아래로 스크롤하려면

간단한 방법으로 특정 요소를 아래로 스크롤하려면

아래로 스크롤 할 때마다이 함수를 호출합니다.

scrollDown 함수 () { document.getElementById를 ( '스크롤'). scrollTop = document.getElementById를 ( '스크롤'). scrollHeight } UL { 높이 : 100 픽셀; 폭 : 200 픽셀; 오버플 Y : 스크롤; 국경 : 1 픽셀의 고체 # 000; }

여기에 최고
다음은 뭔가
다음은 뭔가
다음은 뭔가
다음은 뭔가
다음은 뭔가
다음은 뭔가
다음은 뭔가
다음은 뭔가
다음은 뭔가
다음 하단
다음은 하단
<버튼의 onclick = 'scrollDown ()> 스크롤 하

19.나는 동적 콘텐츠와 각도 응용 프로그램을하고 난 많이하지 성공을 위의 답변의 몇 가지를 시도했다. 나는 Konard의 대답 @ 적응 내 시나리오에 대한 일반 JS에서 일을 가지고 :

나는 동적 콘텐츠와 각도 응용 프로그램을하고 난 많이하지 성공을 위의 답변의 몇 가지를 시도했다. 나는 Konard의 대답 @ 적응 내 시나리오에 대한 일반 JS에서 일을 가지고 :

HTML

<div id="app">
    <button onClick="scrollToBottom()">Scroll to Bottom</button>
    <div class="row">
        <div class="col-md-4">
            <br>
            <h4>Details for Customer 1</h4>
            <hr>
            <!-- sequence Id -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="ID">
            </div>
            <!-- name -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
            </div>
            <!-- description -->
            <div class="form-group">
                <textarea type="text" style="min-height: 100px" placeholder="Description" ></textarea>
            </div>
            <!-- address -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Address">
            </div>
            <!-- postcode -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Postcode">
            </div>
            <!-- Image -->
            <div class="form-group">
                <img style="width: 100%; height: 300px;">
                <div class="custom-file mt-3">
                    <label class="custom-file-label">{{'Choose file...'}}</label>
                </div>
            </div>
            <!-- Delete button -->
            <div class="form-group">
                <hr>
                <div class="row">
                    <div class="col">
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to save">Save</button>
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to update">Update</button>
                    </div>
                    <div class="col">
                        <button class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to remove">Remove</button>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

function scrollToBottom() {
    scrollInterval;
    stopScroll;

    var scrollInterval = setInterval(function () {
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    }, 50);

    var stopScroll = setInterval(function () {
        clearInterval(scrollInterval);
    }, 100);
}

최신 크롬, FF, 가장자리, 주식 안드로이드 브라우저에서 테스트. 여기에 바이올린입니다 :

https://jsfiddle.net/cbruen1/18cta9gd/16/

20.저도 같은 문제를 했어. 나를 위해 시간에 한 지점에서 사업부의 요소는 완전히로드되지 않은 및 scrollTop 속성은 scrollHeight의 정확한 끝 값 아니었다 scrollHeight의 현재 값으로 초기화되었다.

저도 같은 문제를 했어. 나를 위해 시간에 한 지점에서 사업부의 요소는 완전히로드되지 않은 및 scrollTop 속성은 scrollHeight의 정확한 끝 값 아니었다 scrollHeight의 현재 값으로 초기화되었다.

내 프로젝트는 각도 8과 내가 한 일은이었다 :

AfterViewChecked 이벤트는 몇 번을 발사하며 결국 scrollHeight에서 적절한 값을 가져옵니다.

21.

getDocHeight: function() {
  var D = document;
  return Math.max(
    D.body.scrollHeight,
    D.documentElement.scrollHeight,
    D.body.offsetHeight,
    D.documentElement.offsetHeight,
    D.body.clientHeight,
    D.documentElement.clientHeight
  );
}

document.body.scrollTop = document.documentElement.scrollTop = this.getDocHeight();

22.window.scrollTo (0,1e10);

window.scrollTo (0,1e10);

항상 작동합니다.

1E10 큰 숫자입니다. 페이지는 항상 말 때문에.
23.만약 각도 검색 중 하나

만약 각도 검색 중 하나

당신은 아래로 스크롤하여 사업부에이를 추가해야
```
 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>
```

from https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 는 X-요청-으로 헤더의 점은 무엇입니까? (0)	2020.09.29
[JQUERY] 입력 포커스가있는 경우 시험에 jQuery를 사용하여 (0)	2020.09.29
[JQUERY] 나는 Node.js를 함께 jQuery를 사용할 수 있습니까? (0)	2020.09.29
[JQUERY] jQuery를 document.createElement 동등한? (0)	2020.09.29
[JQUERY] 있는 jqGrid 서버 측 오류 메시지 / 검증 처리 (0)	2020.09.29

복붙노트

[JQUERY] 자동으로 페이지 하단으로 스크롤

자동으로 페이지 하단으로 스크롤

해결법

1.jQuery를 필요가 없습니다. 내가 구글 검색에서 얻은 최고 결과의 대부분은 저에게이 대답을했다 :

2.당신은 아래로 전체 페이지를 스크롤하려면 :

3.바닐라 JS 구현 :

4.당신은 애니메이션 형식으로 페이지를 아래로 이동하려면이 옵션을 사용할 수 있습니다.

5.다음은 크로스 브라우저 솔루션이 될 것이다. 그것은 크롬, 파이어 폭스, 사파리 및 IE11에서 테스트되었습니다

6.때때로 페이지, 나는이 스크립트를 사용 끝에 (페이지 궁극적 아래) 아래로 스크롤 (소셜 네트워크의 예를 들어) 아래로 스크롤에 확장 :

7.당신이 그것을 호출 할 필요가 어디든지이 기능을 사용할 수 있습니다 :

8.당신이 애니메이션도이 작업을 수행 할 수 있습니다, 매우 간단합니다

9.하나의 라이너가 아래쪽으로 스크롤을 원활

10.당신은 링크 요소의 참조 속성 href가 어떤 ID를 첨부 할 수 있습니다 :

11.당신은 젠틀 앵커에게 좋은의 자바 스크립트 플러그인을 시도 할 수 있습니다.

12.늦게 파티에,하지만 여기 아래로 모든 요소를 스크롤 할 수있는 몇 가지 간단한 자바 스크립트 전용 코드는 다음과 같습니다

13.코드 아래 셀레늄 사용 스크롤 아래의 경우 :

14.이렇게 많은 답변이 문서의 높이를 계산하려고합니다. 그러나 그것은 나를 위해 제대로 계산되지 않았습니다. 그러나이 두 가지 일 :

15.여기 내 솔루션입니다 :

16.이것은 아래로 스크롤을 보장합니다

17.그림은 가치가 천 개 단어입니다 :

18.간단한 방법으로 특정 요소를 아래로 스크롤하려면

19.나는 동적 콘텐츠와 각도 응용 프로그램을하고 난 많이하지 성공을 위의 답변의 몇 가지를 시도했다. 나는 Konard의 대답 @ 적응 내 시나리오에 대한 일반 JS에서 일을 가지고 :

20.저도 같은 문제를 했어. 나를 위해 시간에 한 지점에서 사업부의 요소는 완전히로드되지 않은 및 scrollTop 속성은 scrollHeight의 정확한 끝 값 아니었다 scrollHeight의 현재 값으로 초기화되었다.

21.

22.window.scrollTo (0,1e10);

23.만약 각도 검색 중 하나

'JQUERY' 카테고리의 다른 글

티스토리툴바

자동으로 페이지 하단으로 스크롤

해결법

1.jQuery를 필요가 없습니다. 내가 구글 검색에서 얻은 최고 결과의 대부분은 저에게이 대답을했다 :

2.당신은 아래로 전체 페이지를 스크롤하려면 :

3.바닐라 JS 구현 :

4.당신은 애니메이션 형식으로 페이지를 아래로 이동하려면이 옵션을 사용할 수 있습니다.

5.다음은 크로스 브라우저 솔루션이 될 것이다. 그것은 크롬, 파이어 폭스, 사파리 및 IE11에서 테스트되었습니다

6.때때로 페이지, 나는이 스크립트를 사용 끝에 (페이지 궁극적 아래) 아래로 스크롤 (소셜 네트워크의 예를 들어) 아래로 스크롤에 확장 :

7.당신이 그것을 호출 할 필요가 어디든지이 기능을 사용할 수 있습니다 :

8.당신이 애니메이션도이 작업을 수행 할 수 있습니다, 매우 간단합니다

9.하나의 라이너가 아래쪽으로 스크롤을 원활

10.당신은 링크 요소의 참조 속성 href가 어떤 ID를 첨부 할 수 있습니다 :

11.당신은 젠틀 앵커에게 좋은의 자바 스크립트 플러그인을 시도 할 수 있습니다.

12.늦게 파티에,하지만 여기 아래로 모든 요소를 ​​스크롤 할 수있는 몇 가지 간단한 자바 스크립트 전용 코드는 다음과 같습니다

13.코드 아래 셀레늄 사용 스크롤 아래의 경우 :

14.이렇게 많은 답변이 문서의 높이를 계산하려고합니다. 그러나 그것은 나를 위해 제대로 계산되지 않았습니다. 그러나이 두 가지 일 :

15.여기 내 솔루션입니다 :

16.이것은 아래로 스크롤을 보장합니다

17.그림은 가치가 천 개 단어입니다 :

18.간단한 방법으로 특정 요소를 아래로 스크롤하려면

19.나는 동적 콘텐츠와 각도 응용 프로그램을하고 난 많이하지 성공을 위의 답변의 몇 가지를 시도했다. 나는 Konard의 대답 @ 적응 내 시나리오에 대한 일반 JS에서 일을 가지고 :

20.저도 같은 문제를 했어. 나를 위해 시간에 한 지점에서 사업부의 요소는 완전히로드되지 않은 및 scrollTop 속성은 scrollHeight의 정확한 끝 값 아니었다 scrollHeight의 현재 값으로 초기화되었다.

21.

22.window.scrollTo (0,1e10);

23.만약 각도 검색 중 하나

'JQUERY' 카테고리의 다른 글

티스토리툴바

12.늦게 파티에,하지만 여기 아래로 모든 요소를 스크롤 할 수있는 몇 가지 간단한 자바 스크립트 전용 코드는 다음과 같습니다