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

질문 목록이 있다고 생각하십시오. 첫 번째 질문을 클릭하면 자동으로 페이지 하단으로 이동합니다.

실제로 jQuery를 사용 하여이 작업을 수행 할 수 있음을 알고 있습니다.

그렇다면이 질문에 대한 답변을 찾을 수있는 문서 나 링크를 제공해 주시겠습니까?

편집 : 페이지 하단의 특정 HTML 요소 로 스크롤해야 합니다.

jQuery는 필요하지 않습니다. Google 검색에서 얻은 최고의 결과는 대부분 다음과 같은 답변을 제공합니다.

window.scrollTo(0,document.body.scrollHeight);

중첩 된 요소가있는 경우 문서가 스크롤되지 않을 수 있습니다. 이 경우 스크롤하는 요소를 대상으로 지정하고 대신 스크롤 높이를 사용해야합니다.

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

onclick질문 이있는 이벤트 (예 :)에이를 연결할 수 있습니다 <div onclick="ScrollToBottom()" ....

살펴볼 수있는 몇 가지 추가 소스 :

• http://www.sourcetricks.com/2010/07/javascript-scroll-to-bottom-of-page.html
• http://www.alecjacobson.com/weblog/?p=753
• http://www.mediacollege.com/internet/javascript/page/scroll.html
• http://www.electrictoolbox.com/jquery-scroll-bottom/

전체 페이지를 맨 아래로 스크롤하려는 경우 :

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

업데이트 : 최신 버전의 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

}

jquery.com : ScrollTo

애니메이션도 매우 간단합니다.

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

희망이 도움, 감사합니다

바닥으로 부드럽게 스크롤하는 하나의 라이너

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

스크롤하여 간단히 설정 top 에0

링크 요소의 모든 id속성을 참조 할 수 있습니다 href.

<a href="#myLink" id="myLink">
    Click me
</a>

위의 예 Click me에서 사용자 가 페이지 하단을 클릭하면 내비게이션이 탐색 Click me합니다.

Gentle Anchors 에 멋진 자바 스크립트 플러그인을 사용해보십시오 .

예:

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

호환성 테스트 대상 :

• 맥 파이어 폭스, 사파리, 오페라
• Windows Firefox, Opera, Safari, Internet Explorer 5.55 이상
• Linux는 테스트되지 않았지만 최소한 Firefox에서는 정상이어야합니다.

파티에 늦었지만 요소를 맨 아래 로 스크롤 하는 간단한 자바 스크립트 전용 코드가 있습니다 .

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

Selenium에서 아래로 스크롤하려면 아래 코드를 사용하십시오.

하단 드롭 다운이 끝날 때까지 페이지 높이까지 스크롤합니다. JavaScript와 React 모두에서 잘 작동하는 아래 자바 스크립트 코드를 사용하십시오.

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");

문서의 높이를 계산하려는 많은 답변이 있습니다. 그러나 그것은 나를 위해 올바르게 계산되지 않았습니다. 그러나이 두 가지 모두 작동했습니다.

jquery

    $('html,body').animate({scrollTop: 9999});

아니면 그냥 js

    window.scrollTo(0,9999);

내 해결책은 다음과 같습니다.

 //**** 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)

이것은 바닥으로 스크롤을 보장합니다

헤드 코드

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

그림은 천 단어의 가치가 있습니다.

열쇠는 :

document.documentElement.scrollTo({
  left: 0,
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
});

사용 document.documentElement은 IS하는 <html>소자. 그냥 사용 비슷 window하지만 전체 페이지가 아니라 용기, 그것은 변경할 것을 제외하고 단지 이런 식으로 작동하는지 있기 때문에,이 방법을 수행하는 내 개인적인 취향 document.body과 document.documentElement에 document.querySelector("#container-id").

예:

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

  document.documentElement.scrollTo({
    left: 0,
    top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
    behavior: 'smooth'
  });

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

다음과 같은 경우 차이점을 비교할 수 있습니다 scrollTo().

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

특정 요소를 아래로 스크롤하려는 경우 간단한 방법

아래로 스크롤 할 때마다이 기능을 호출하십시오.

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}

ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}

<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>

동적 콘텐츠가 포함 된 Angular 앱이 있으며 위의 답변 중 몇 가지를별로 성공하지 못했습니다. @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;
}

JS

function scrollToBottom() {
    scrollInterval;
    stopScroll;

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

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

최신 Chrome, FF, Edge 및 스톡 Android 브라우저에서 테스트되었습니다. 바이올린은 다음과 같습니다.

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

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

window.scrollTo (0,1e10);

항상 작동합니다.

1e10은 큰 숫자입니다. 항상 페이지 끝입니다.

Angular를 검색하는 사람이 있다면

아래로 스크롤하여 div에 추가하십시오.

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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