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.
As a matter of fact, I do know that this can be done using jQuery.
So, could you provide me with some documentation or some links where I can find answer to this question?
EDIT: Need to scroll to a particular HTML element at the bottom of the page
This question is related to
javascript
jquery
The answer is
Below should be the cross browser solution. It has been tested on Chrome, Firefox, Safari and IE11
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
window.scrollTo(0,document.body.scrollHeight); doesn't work on Firefox, at least for Firefox 37.0.2
So many answers trying to calculate the height of the document. But it wasn't calculating correctly for me. However, both of these worked:
jquery
$('html,body').animate({scrollTop: 9999});
or just js
window.scrollTo(0,9999);
I found a trick to make it happen.
Put an input type text at the bottom of the page and call a jquery focus on it whenever you need to go at the bottom.
Make it readonly and nice css to clear border and background.
A picture is worth a thousand words:
The key is:
document.documentElement.scrollTo({
left: 0,
top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
behavior: 'smooth'
});
It is using document.documentElement, which is the <html> element. It is just like using window, but it is just my personal preference to do it this way, because if it is not the whole page but a container, it works just like this except you'd change document.body and document.documentElement to document.querySelector("#container-id").
Example:
let cLines = 0;_x000D_
_x000D_
let timerID = setInterval(function() {_x000D_
let elSomeContent = document.createElement("div");_x000D_
_x000D_
if (++cLines > 33) {_x000D_
clearInterval(timerID);_x000D_
elSomeContent.innerText = "That's all folks!";_x000D_
} else {_x000D_
elSomeContent.innerText = new Date().toLocaleDateString("en", {_x000D_
dateStyle: "long",_x000D_
timeStyle: "medium"_x000D_
});_x000D_
}_x000D_
document.body.appendChild(elSomeContent);_x000D_
_x000D_
document.documentElement.scrollTo({_x000D_
left: 0,_x000D_
top: document.documentElement.scrollHeight - document.documentElement.clientHeight,_x000D_
behavior: 'smooth'_x000D_
});_x000D_
_x000D_
}, 1000);body {_x000D_
font: 27px Arial, sans-serif;_x000D_
background: #ffc;_x000D_
color: #333;_x000D_
}You can compare the difference if there is no scrollTo():
let cLines = 0;_x000D_
_x000D_
let timerID = setInterval(function() {_x000D_
let elSomeContent = document.createElement("div");_x000D_
_x000D_
if (++cLines > 33) {_x000D_
clearInterval(timerID);_x000D_
elSomeContent.innerText = "That's all folks!";_x000D_
} else {_x000D_
elSomeContent.innerText = new Date().toLocaleDateString("en", {_x000D_
dateStyle: "long",_x000D_
timeStyle: "medium"_x000D_
});_x000D_
}_x000D_
document.body.appendChild(elSomeContent);_x000D_
_x000D_
}, 1000);body {_x000D_
font: 27px Arial, sans-serif;_x000D_
background: #ffc;_x000D_
color: #333;_x000D_
}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.
A simple way if you want to scroll down specific element
Call this function whenever you want to scroll down.
function scrollDown() {_x000D_
document.getElementById('scroll').scrollTop = document.getElementById('scroll').scrollHeight_x000D_
}ul{_x000D_
height: 100px;_x000D_
width: 200px;_x000D_
overflow-y: scroll;_x000D_
border: 1px solid #000;_x000D_
}<ul id='scroll'>_x000D_
<li>Top Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Something Here</li>_x000D_
<li>Bottom Here</li>_x000D_
<li style="color: red">Bottom Here</li>_x000D_
</ul>_x000D_
_x000D_
<br />_x000D_
_x000D_
<button onclick='scrollDown()'>Scroll Down</button>You can use this function wherever you need to call it:
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}
You may try Gentle Anchors a nice javascript plugin.
Example:
function SomeFunction() {
// your code
// Pass an id attribute to scroll to. The # is required
Gentle_Anchors.Setup('#destination');
// maybe some more code
}
Compatibility Tested on:
- Mac Firefox, Safari, Opera
- Windows Firefox, Opera, Safari, Internet Explorer 5.55+
- Linux untested but should be fine with Firefox at least
Late to the party, but here's some simple javascript-only code to scroll any element to the bottom:
function scrollToBottom(e) {
e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}
you can do this too with animation, its very simple
$('html, body').animate({
scrollTop: $('footer').offset().top
//scrollTop: $('#your-id').offset().top
//scrollTop: $('.your-class').offset().top
}, 'slow');
hope helps, thank you
I have an Angular app with dynamic content and I tried several of the above answers with not much success. I adapted @Konard's answer and got it working in plain JS for my scenario:
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);
}
Tested on the latest Chrome, FF, Edge, and stock Android browser. Here's a fiddle:
window.scrollTo(0,1e10);
always works.
1e10 is a big number. so its always the end of the page.
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:
- I used viewchild in order to obtain the element in my .ts file.
- I've inherited the AfterViewChecked event and placed one line of code in there which states that the viewchild element has to take into the scrollTop value the value of scrollHeight (this.viewChildElement.nativeElement.scrollTop = this.viewChildElement.nativeElement.scrollHeight;)
The AfterViewChecked event fires a few times and it gets in the end the proper value from scrollHeight.
Sometimes the page extends on scroll to buttom (for example in social networks), to scroll down to the end (ultimate buttom of the page) I use this script:
var scrollInterval = setInterval(function() {
document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);
And if you are in browser's javascript console, it might be useful to be able to stop the scrolling, so add:
var stopScroll = function() { clearInterval(scrollInterval); };
And then use stopScroll();.
If you need to scroll to particular element, use:
var element = document.querySelector(".element-selector");
element.scrollIntoView();
Or universal script for autoscrolling to specific element (or stop page scrolling interval):
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);
If you want to scroll entire page to the bottom:
var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
See the sample on JSFiddle
If you want to scroll an element to the bottom:
function gotoBottom(id){
var element = document.getElementById(id);
element.scrollTop = element.scrollHeight - element.clientHeight;
}
And that's how it works:
Ref: scrollTop, scrollHeight, clientHeight
UPDATE: Latest versions of Chrome (61+) and Firefox does not support scrolling of body, see: https://dev.opera.com/articles/fixing-the-scrolltop-bug/
If any one searching for Angular
you just need to scroll down add this to your div
#scrollMe [scrollTop]="scrollMe.scrollHeight"
<div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
</div>
Vanilla JS implementation:
element.scrollIntoView(false);
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
Here's my solution:
//**** 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)
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>
one liner to smooth scroll to the bottom
window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
To scroll up simply set top to 0
You can use this to go down the page in an animation format.
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
Source: Stackoverflow.com