Consider I have a list of questions. When I click on the first question, it should automatically take me to the bottom of the page.
For a matter of fact, I do know
For Scroll down in Selenium use below code:
Till the bottom drop down, scroll till the height of the page. Use the below javascript code that would work fine in both, JavaScript and React.
JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object)
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");
This will guaranteed scroll to the bottom
Head Codes
<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>
Body code
<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">▼ Bottom ▼</a>
jQuery isn't necessary. Most of the top results I got from a Google search gave me this answer:
window.scrollTo(0,document.body.scrollHeight);
Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use it's scroll height instead.
window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);
You can tie that to the onclick
event of your question (i.e. <div onclick="ScrollToBottom()" ...
).
Some additional sources you can take a look at:
I've had the same issue. For me at one point in time the div's elements were not loaded entirely and the scrollTop property was initialized with the current value of scrollHeight, which was not the correct end value of scrollHeight.
My project is in Angular 8 and what I did was:
The AfterViewChecked event fires a few times and it gets in the end the proper value from scrollHeight.
window.scrollTo(0,1e10);
always works.
1e10 is a big number. so its always the end of the page.
You can attach any id
to reference attribute href
of link element:
<a href="#myLink" id="myLink">
Click me
</a>
In the example above when user clicks Click me
at the bottom of page, navigation navigates to Click me
itself.