CODEWITHSUNDEEP
javascriptjquery
Eric
Eric

Reputation: 2034

How do I cause the user to scrolldown in jQuery?

Most of the methods/events I see around online only return a value for how far down the page the user is currently scrolled. How can I cause the client* to actually scroll? What I intend to do is have the client scroll down 215px (from whereever they currently are) after a certain action.

Update:

I have this working to scroll down 215px on the event that I want:

$(".mobile_text_focus_fix").focus(function(){
var top = document.body.scrollTop;
top += 215;
window.scrollTo(0,top)
});

However, it appears that this wont allow the client to scroll below 215px from the bottom of the document. If the client is within 215px of the bottom, or at the bottom, it moves up to 215px from the bottom. If the client is just over 215px from the bottom, it only scrolls down to 215px. I'm trying to make the client scroll down 215px, or if they are less than 215px from the bottom of the document, then scroll all the way down.

Update:

My current code is calculating the height of the document once and scrolling based on it's innitial calculation each time, which was causing the strange issue mentioned in the paragraph above this.

However, my document changes size based on xml injected to the body, and I also need to be able to scroll the client down 215px, or to the bottom of the bottom of the document if they're already within 215px of the bottom, each time the user performs a specific action.

This action which may occur multiple times while scrolled at different heights, or with different content placed on the page via xml which will change the document height. So basically, how can I perform the same task that the code I have above is doing, but while recalculating the document height each time?

Upvotes: 2

Views: 240

Answers (1)

Derek
Derek

Reputation: 2735

First you have to get the current position of the document by document.body.scrollTop and add 215 to it. Then use either window.scrollTo or jQuery .animate() to scroll down 215px from current position.

Without using jQuery

var top = document.body.scrollTop;
top += 215;
window.scrollTo(0,top)

scroll down with animate by using jQuery

var top = document.body.scrollTop;
top += 215;
$("html, body").animate({ scrollTop: top  },'100');

Upvotes: 2

Related Questions