Develop Reference

Autoscroll div (JavaScript)

I've got 2 div's (left div and right div). They are separated by half. On the right div you can see some pictures and on left side, there are information, which could be longer on some days that's the reason why I want to let it autoscroll to the bottom and back to the top.
I got already a Script but my version is scrolling the whole website.:/
My question: where is my mistake?
setInterval(function(){
$("html, body").animate({ scrollTop: $("leftdiv").height() }, 10000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 8000);
},1500);
},1500);
https://jsfiddle.net/4gLts2f0/5/
I found a script which can scroll down.:) But I got still a problem: I do not know how I can let him jump back to the top and repeat the process
https://jsfiddle.net/4gLts2f0/7/

Try $("leftdiv").animate({ scrollTop: $("leftdiv").height() }, 10000);

scrollTop is a tricky properties to play with, i personally solved a similar issue calculating the offset from the top of the page with this function:
function getDistanceFromTop(element) {
var yPos = -100;
while(element) {
yPos += (element.offsetTop);
element = element.offsetParent;
}
return yPos;
}
after that i suggest try to use the scroll function from the specific target until you reach the specific point.

How to use scrollTop?

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;
}

scroll to element when page is loaded get wrong element sometimes

I have a page where there many are a loop of posts with description and images.
then I used this function to scroll to element
$('html, body').animate({
scrollTop: $(".entry" + vm.note).offset().top + 200
}, 1000);
the probleme is sometimes I scrolled to go element and sometimes not.
I dont know why.
PS: I using angularJS

It might be the DOMs are still rendering and it can't calculate the exact top distance from body/html to the element(".entry"+vm.note) you want to scroll.
You might try to put a delay before you execute your code using timeout.
setTimeout(function(){
$('html, body').animate({
scrollTop: $(".entry" + vm.note).offset().top + 200
}, 1000);
}, 3000); //set it longer if it's still not scrolling

How to scroll down a certain distance on click jQuery

I'm trying to scroll the page down when I click a button with an animation to a certain distance, currently, I'm able to scroll down to a certain element but this is not what I want, I want to scroll down to a certain distance in pixels.
I've tried lots of variation but they don't seem to work in my case, at least not how I want them to.
Anyway, here's the code:
$(document).ready(function(){
$('.next_section').click(function(){
$('html, body').animate({
scrollTop: $('.img_div').offset().top
}, 1000);
});
}

to a certain distance
I assume distance in pixels?
This scrolls down 150px:
var y = $(window).scrollTop(); //your current y position on the page
$(window).scrollTop(y+150);
#therealbischero (thanks!) mentions in a comment the missing part of my answer, how to make it smoothly scrolling:
var y = $(window).scrollTop();
$('html, body').animate({ scrollTop: y + 150 })

how to keep scroll bar always to bottom of page

to keep scroll bar always at the bottom of the page i used
$(document).ready(function() {
$(function() {
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});
It is working in the Firefox but it is not working in the chrome.
Why it is not working in the chrome can anybody suggest me the good solution to keep the scroll bar always at the bottom of the page.
Thanks for any help

If you want to move back to the bottom of the page even if the user attempts to scroll up, you are going to need to call your function on an interval.
$(document).ready(function() {
function scrollBottom(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
}
setInterval(scrollBottom, 500);
});
You can play with the interval to get the desired amount of UI interactivity.
Alternatively, you could bind to the scroll event, this will fire whenever the user scrolls.
$(document).ready(function() {
$(window).scroll(function(){
$("html, body").animate({ scrollTop: $(document).height() }, "fast");
});
});