How can i scroll page to bottom with JS ? I have problem about it. I need to scroll page to bottom until the load ends. When the page scrolled bottom, pages creates new elements so need to scroll one more time , one more time ... How can i automate it ?
You can use element.scrollIntoView() in order to scroll directly to the element that you want, here is an example you can use
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
this.stopScroll();
here is a link for documentation:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Try with this code to scroll bottom
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
Related
On my HTML page, I have stuff that can be added dynamically by a button.
When the stuff that is added is not in the viewport anymore, I want to scroll to get it into the viewport.
As the added content is always added below the clickable button that adds the stuff i always want to have the bottom of the element to be at the bottom of the viewport after scrolling, but i am just able to put the top of the element at the top of the viewport with that function:
if (!elementInViewport(document.getElementById("ElementId"))){
$([document.documentElement, document.body]).animate({
scrollTop: $("#ElementId").offset().top
}, 2000);
}
There is no scrollBottom instead of scrollTop and when I replace the offset().top with offset().bottom the function doesn't do anything at all.
How can I do that?
Try the scrollIntoView() function:
if (!elementInViewport(document.getElementById("ElementId"))){
document.getElementById("ElementId").scrollIntoView(false);
}
How can I scroll my div with class main to last scroll position
means the scroll bar goes automatically at the end
could you try with scrollTop
document.querySelector('.main').scrollTop = document.querySelector('.main').scrollHeight
so you change the height by top position of the scroll
you can use a trick if you put a element at least of the div and the element with an id you can use this code
window.location = ('#id')
If you want to animate it, use this code
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
Make sure you have jQuery on the page you're using this code on
I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks
One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it
I came across this useful blog Smoothly scroll to an element without a jQuery plugin
In the below code
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
Auto scrolls down to target-element if sliderOn id exists within the body, but, because i have a fixed navbar the target-element goes behind it and cause not to show 20px of the target-element on top. Any solution here?
Try this:
$('body#sliderOn').animate({
scrollTop: $("#target-element").offset().top - 20
}, 1000);
The context: I have a one page web app. So there's lots of div's being hidden at any one time (I'm not sure if this matters). What I am finding is that when a user is finished with one page (Page X), then they click back (to Page Y) - if they return back to Page X then the position is the same as when they left the page. The back button is at the bottom, so that's where the user ends up again.
What I want, is when they return to Page X for them to be at the top of the page so they can start again. Whether it scrolls back or just jumps back - either way is fine.
I've tried all of the following with no success:
// Scroll to top
setTimeout(function(){
alert('scroll');
$('html, body').animate({scrollTop : 0}, 2000);
}, 2000);
Adding a div with the id top-anchor at the top and using:
$('html, body').animate({
scrollTop: $("#top-anchor").offset().top
}, 2000);
Having a and using an anchor, with the code below (it only works once though, after that as the hash is already in the URL it no longer works I suppose):
document.hash = '#top-anchor';
Also tried:
window.scrollTo(0, 0);
No luck.
Any alternative ideas are much appreciated.
You can achieve something like that: DEMO : https://jsfiddle.net/yeyene/bpwtLg1w/1/
Not sure how your content divs are shown and hidden, but just get the idea of adding scroll to top of page div part.
Add scroll event on Back button click event, since you already known which page to go, you can scroll to this page's top, by using...
$(element).position().top
JQUERY
$(document).ready(function () {
$('input[type=button]').on('click', function(){
getPageID = $(this).attr('id');
$('.page').hide(0);
$('div#'+getPageID).show(0);
$('html,body').animate({
scrollTop: $('div#'+getPageID).position().top - 10
}, 500);
});
});