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



считайте, что у меня есть список вопросов. Когда я нажимаю на первый вопрос, он должен автоматически привести меня к нижней части страницы.



на самом деле, я знаю, что это можно сделать с помощью jQuery.



итак, не могли бы вы предоставить мне некоторую документацию или некоторые ссылки, где я могу найти ответ на этот вопрос?



редактировать: нужно прокрутить до определенного HTML элемент в нижней части страницы

532   14  

14 ответов:

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;

посмотреть пример on JSFiddle

Если вы хотите прокрутить элемент вниз:

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

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

enter image description here

Ref:scrollTop,scrollHeight,clientHeight

обновление: последние версии Chrome (61+) и Firefox не поддерживает прокрутку тела, см.: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

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

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

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

надеюсь поможет, спасибо

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

var scrollInterval = setInterval(function() { 
    document.body.scrollTop = document.body.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.body.scrollTop + window.innerHeight) != document.body.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.body.scrollTop = document.body.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

вы можете попробовать Нежный Якоря хороший плагин 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, по крайней мере

вот мое решение:

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

поздно на вечеринку, но вот несколько простых javascript-только код для прокрутки любой элемент внизу:

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

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

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

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

для прокрутки вниз в 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)", "");

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

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

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>

Comments

    Ничего не найдено.