Прокрутка автоматически до нижней части страницы
считайте, что у меня есть список вопросов. Когда я нажимаю на первый вопрос, он должен автоматически привести меня к нижней части страницы.
на самом деле, я знаю, что это можно сделать с помощью jQuery.
итак, не могли бы вы предоставить мне некоторую документацию или некоторые ссылки, где я могу найти ответ на этот вопрос?
редактировать: нужно прокрутить до определенного HTML элемент в нижней части страницы
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; }и вот как это работает:
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 }
вы можете сделать это с анимацией, его очень просто
$('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