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.

jQuery smooth scroll to element - not working properly

I was trying to make a "Click to Scroll" menu on my website (www.trianglesquad.com). I tried a code from
w3schools.com "https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll". I am facing a problem. It doesn't scroll to perfect point. For Example, If I click on "Portfolio", It scrolls to the mid of portfolio section. It scroll to perfect point after 3-4 Clicks.
Any Help will be highly appreciated :)
Thanks.

Not sure why all the down votes, as we all were beginners at some stage... Maybe for future posts, try creating a JS fiddle with an example and be more specific.
You can change the scrolling offset by adding or subtracting from the offset as per below example:
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top -200
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
The key take away here is this line:
scrollTop: $(hash).offset().top -200
You can add or subtract any amount of pixels that you choose.
Edit:
Actually try this code instead:
$(document).ready(function() {
$("#xp-navigation").find("a[href*=#]:not([href=#])").click(function () {
var offset = 0;
var speed = 1000;
var target = $(this.hash);
$("html,body").animate({
scrollTop: target.offset().top - offset
}, speed);
});
});
It is a bit cleaner and you can also adjust the offset.

Repeatedly scroll infinite scrolling page with jquery

I want to repeatedly scroll to the bottom of the page and back up every 40ms.
$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400);
},400);
setInterval(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 400);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 400);
},40);
},80);
So far so good. Only problem is, the page I want to scroll uses infinite scrolling, i.e. each time I scroll to the bottom of the page, the page height ($(document).height()) changes. So instead of scrolling the entire page, it keeps scrolling the same distance as the original height of the page.
The point of the script is to get the full content of the page after scrolling it to the very bottom (i.e. such a number of times that scrolling it once more would not increase the content of the page any longer). How can I modify this script so that it scrolls to the very bottom of the page each time the page height increases?

Have you considered using code like this
$(document).height() - win.height() == win.scrollTop())
or
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});

Here is something you could try.
I did not test it... I just wrote it like this.
To initialise it on load, It needs to have two different values in the two Height_ variables.
There is also delays for animation up and down...
Those can be as short as you want.
There is a delay to let the infinite scroll function load the new content.
This one needs to be adjusted wisely.
It should work...
var Height_actual=1;
var Height_mem=0;
var animateDelay_down=400;
var animateDelay_up=400;
var infiniteDelay_load=800;
function forceInfinite(){
// Force infinite scroll to load all it's content
// IF the last known height is NOT the same as the actual.
if(Height_actual!=Height_mem){
// Keep the actual height in "memory" for the next iteration.
Height_mem=$(document).height();
// Going to the bottom
$("html, body").animate({ scrollTop: actualHeight }, animateDelay_down);
// At the end of the animation
// PLUS a delay for the infinite scroll to load the new content.
setTimeout(function() {
// Possibly a new height to keep in "memory".
Height_actual=$(document).height();
// OK, going back to top
$('html, body').animate({scrollTop:0}, animateDelay_up);
},animateDelay_down+infiniteDelay_load);
// Restart the function after all delays.
setTimeout(function() {
forceInfinite();
},animateDelay_down+infiniteDelay_load+animateDelay_up);
}
}
// Init
forceInfinite();

Prevent page from moving when content is added above clicked button with jQuery

I have three sections on my page, from top to bottom, A, B and C. You click on a button in section C. Now, some content is loaded in section A (above the button you clicked on), e.g. the content uses jQuery's slideDown() method.
Now, section C scrolls a little bit down (because the new content is making it do so). That's what I'd like to prevent. Is there a way that the browser automatically scrolls page to be at the exact same position as before the content loaded?

If you want to make sure that the button does not move on the screen at all, even though content is added above it, this should do it:
$("mybutton").click(function() {
//Save the vertical position of the button before content is added.
var x1 = $(this).offset().top;
//Do whatever the button is suppose to do, including adding the new content.
doAllTheStuff();
//See how much we moved.
var x2 = $(this).offset().top;
var dx = x2 - x1;
//Scroll the same amount to keep the button from moving on the screen.
$(document).scrollTop($(document).scrollTop() + dx);
});
If you are using this functionallity a lot on your page, you might want to wrap up the code a bit nicer. Here is a working JSFiddle.
This might also be interesting reading:
http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html
Maintain page position while page length changes
jquery - keep window from changing scroll position while prepending items to a list?

You can scroll page to element when click on your button (probably your element).
$('html, body').animate({ scrollTop: $("#element").offset().top }, 2000);
Here an example: https://jsfiddle.net/kmser1uh/
UPDATE
A trick for scroll in the same exactly position is to save the offset of the element in the page after the scroll, and animate the scroll after button click.
The updated example:
https://jsfiddle.net/kmser1uh/2/
This is the save part:
var el;
var elPos;
var clr;
$(window).scroll(function(){
clearTimeout(clr);
clr = setTimeout(function(){
$('.fullWidthBodyElement').each(function(){
if ($(window).scrollTop() > $(this).offset().top &&
$(window).scrollTop() < $(this).offset().top + $(this).height()) {
el = this;
elPos = $(window).scrollTop() - $(this).offset().top;
}
});
},500);
});
And this the resume position:
$('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);

You Migt be using # in href attribute in anchor tag usejavascript:void(0);then you page will not get scrolled.

Adjusting height immediately followed by ScrollTop is very jerky/choppy with jQuery

I am trying to create a page which contains a bunch of blocks (that would usually contain 'overflow: hidden' text that can be expanded by clicking on the box). But when I click on the box to adjust its height (to show all the text) I also want to bring that box into focus by using ScrollTop. It looks weird if you click on the box to expand its height if it remains out of view within the browser window.
I have a jQuery function that animates the height change and animates the ScrollTop repositioning nicely, however it often looks very choppy to me. It's not consistent. Sometimes it's pretty smooth, other times it'll adjust the box's height and then very abruptly scroll, which has a very unpleasant herky jerky effect. Adding to the odd behavior, is that I cannot scroll the window manually using my mouse for several seconds after the function completes. It's as if it's blocking manual mouse scroll.
I've created a little jsfiddle (sans text that I would usually place inside the right-hand boxes).
jsfiddle
$(document).ready(function() {
$(".right").click(function() {
var currentHeight = $(this).height();
$(this).animate({
height: (currentHeight == 100 ? 200 : 100)
}, 400, function() {
var offset = $(this).offset();
$('html, body').animate({
scrollTop: offset.top
}, 1000);
});
});
});

Maybe I am misunderstanding you, but the way you have it set up, the height will change, and then after it completes, it will move the scroll position, at a slower speed even.
Don't you want to do these at the same time and speed, instead of sequentially?
$(".right").click(function () {
var currentHeight = $(this).height();
$(this).animate({
height: (currentHeight == 100 ? 200 : 100)
}, 400);
var offset = $(this).offset();
$('html, body').animate({
scrollTop: offset.top
}, 400);
});
Demo: http://jsfiddle.net/NpdDN/
Also, this will essentially "block" mouse scroll during the animation, because it is continually setting an absolute scroll position, overriding anything your mouse does.