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
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();
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)
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:
https://jsfiddle.net/cbruen1/18cta9gd/16/
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")
.
let cLines = 0;
let timerID = setInterval(function() {
let elSomeContent = document.createElement("div");
if (++cLines > 33) {
clearInterval(timerID);
elSomeContent.innerText = "That's all folks!";
} else {
elSomeContent.innerText = new Date().toLocaleDateString("en", {
dateStyle: "long",
timeStyle: "medium"
});
}
document.body.appendChild(elSomeContent);
document.documentElement.scrollTo({
left: 0,
top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
behavior: 'smooth'
});
}, 1000);
body {
font: 27px Arial, sans-serif;
background: #ffc;
color: #333;
}
You can compare the difference if there is no scrollTo()
:
let cLines = 0;
let timerID = setInterval(function() {
let elSomeContent = document.createElement("div");
if (++cLines > 33) {
clearInterval(timerID);
elSomeContent.innerText = "That's all folks!";
} else {
elSomeContent.innerText = new Date().toLocaleDateString("en", {
dateStyle: "long",
timeStyle: "medium"
});
}
document.body.appendChild(elSomeContent);
}, 1000);
body {
font: 27px Arial, sans-serif;
background: #ffc;
color: #333;
}
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