Прокрутка автоматически до нижней части страницы

Ответ 1

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/

Ответ 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;
}

И вот как это работает:

Ref: scrollTop, scrollHeight, clientHeight

ОБНОВЛЕНИЕ: Последние версии Chrome (61+) и Firefox не поддерживают прокрутку тела, см.: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Ответ 3

Реализация Vanilla 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

Ниже должно быть решение для кросс-браузера. Он был протестирован на Chrome, Firefox, Safari и IE11.

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

window.scrollTo(0, document.body.scrollHeight); не работает на Firefox, по крайней мере для Firefox 37.0.2

Ответ 6

Вы можете использовать эту функцию везде, где вам нужно ее вызвать:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: ScrollTo

Ответ 7

вы можете сделать это тоже с анимацией, ее очень простой

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

Надежда помогает, спасибо

Ответ 8

Иногда страница расширяется при прокрутке до кнопки (например, в социальных сетях), чтобы прокрутить вниз до конца (конечная кнопка страницы), я использую этот скрипт:

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

И если вы находитесь в консоли javascript браузера, может быть полезно иметь возможность остановить прокрутку, поэтому добавьте:

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

Ответ 9

Вы можете попробовать Gentle Anchors хороший плагин javascript.

Пример:

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

Совместимость Проверено на:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55 +
• Linux непроверен, но должен быть в порядке с Firefox как минимум

Ответ 10

Здесь мое решение:

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

Ответ 11

Поздно к вечеринке, но вот какой-то простой javascript-код для прокрутки элемента any:

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

Ответ 12

Вы можете прикрепить любой id к ссылочному атрибуту href элемента ссылки:

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

В приведенном выше примере, когда пользователь нажимает Click me внизу страницы, навигационная система переходит к Click me.

Ответ 13

Столько ответов пытается вычислить высоту документа. Но это не правильно для меня. Тем не менее, оба из них работали:

JQuery

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

или просто JS

    window.scrollTo(0,9999);

Ответ 14

Для прокрутки вниз в Selenium используйте код ниже:

Пока снизу снизу, прокрутите страницу до высоты страницы. Используйте приведенный ниже код javascript, который будет хорошо работать как в JavaScript, так и в React.

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

Ответ 15

Очень простой способ

Вызывайте эту функцию, когда хотите прокрутить вниз.

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>

Ответ 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();

Ответ 17

один вкладыш для плавной прокрутки вниз

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

Для прокрутки вверх просто установите top на 0

Ответ 18

window.scrollTo(0,1e10);

всегда работает.

1e10 - это большое число. так что это всегда конец страницы.

Ответ 19

Если кто-то ищет Angular

вам просто нужно прокрутить вниз добавить это в свой div

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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