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
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 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);
My page is divided into sections, each section is a div in the size of the screen (100%).
Every section must have a button to scroll down a full screen to the next section.
I am able to scroll one window down, without completely understanding what I do, and how to be able to keep scrolling to next section from every given section.
function nextButton() {
$('html, body').animate({
scrollTop: $(window).height()
}, 1000);
}
That parameter scrollTop is the value determined by calculating the height from top of your browser to the point you want to scroll to.
In the code you provided you are scrolling down for 1 window height by $(window).height() so if you want to scroll to next section (I assume each section has height equal 1 window) you need to multiplies it.
function scrollToSection(sectionNumber) {
$('html, body').animate({
scrollTop: $(window).height() * sectionNumber
}, 1000);
}
// so if you want to scroll to your first section you call this
scrollToSection(1) // and so on
Define a common class your divs (ex: sections)
// Maintain the current div where the last scroll was performed
var index = 0;
function nextButton() {
index += 1;
var divSections = $('.sections');
// Check to see if more divs exist
if (!divSections[index]) return;
$('html, body').animate({
scrollTop: divSections[index].offset().top
}, 1000);
}
You can just use some jQuery smooth scrolling by adding IDs to each div element:
$("html,body").animate({scrollTop: myDiv.offset().top}, "slow");
Adding an event listener for a click or a scroll, and using this as the event handler, will give you what you want.
Try to give each div an id and your button add a anchor tag and reference it in which div you want to target. Then to have animate effect on your CSS add scroll-behaviour: smooth.
<div id="#section-one"></div>
<div id="#section-two"></div>
<a href="#section-one" class="button"/>
<div id="#section-three"></div>
<a href="#section-two" class="button"/>
html {
scroll-behavior: smooth;
}
I want to have scroll animation for my block. The block should scroll from current scroll position of the page(page_scroll_value) to target scroll position (my_scroll_value).
I know about .animate() method in jQuery but I didn't find something about animation from value A to value B. How I can solve the task?
here is one example
Js Fiddle
$('html, body').stop().animate({
'scrollTop': 0 // or any specific offset postion
}, 1000)
If I read your question right, this will work:
$("#element").animate({scrollTop: my_scroll_value}, 500);
where 100 is the duration in milliseconds.
I try to load specific location in same page. But the problem is, the header is fixed on position top, When I click the links, the header go behind of the header. So I am not able to show some contents. Please visit this Fiddle. You can understand what I am try to say.
I dont like to add padding and margin.
You might want to change your HTML. There can be only one id per page.
In the given fiddle, you have a repeating <div id="one">
Now, to get the scroll working, you could do something like this :
$(document).ready(function(){
$("a").click(function(e) {
e.preventDefault();
var hash = $(this).attr("href");
//console.log($(hash).position().top);
$('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);
});
});
Here $(hash).position().top gets the position of the div on the page and I subtract 50 from it (the height of the fixed div).
Here is a fiddle