2

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?

Eric
  • 2,004
  • 6
  • 23
  • 33
  • duplicate? http://stackoverflow.com/questions/12650170/how-to-scroll-down-jquery – ingo Mar 07 '13 at 15:31
  • you mean the _user_ or the _client_ ? I mean, to force the user to scroll down you can ask them to use their scroll wheel, but I doubt that's what you mean? – Nanne Mar 07 '13 at 15:31
  • you may find your answer here: http://stackoverflow.com/questions/3742346/use-jquery-to-scroll-to-the-bottom-of-a-div-with-lots-of-text?rq=1 – Jonathan Vance Mar 07 '13 at 15:34
  • @ingo That question seems pretty specific towards code that the submitter found online somewhere, and even though they may have solved his issue, the question and answers don't really explain much. – Eric Mar 07 '13 at 15:35
  • @Nanne Yes, I meant the client, thanks. I've updated the question to reflect that. – Eric Mar 07 '13 at 15:37

1 Answers1

2

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');
Derek
  • 2,695
  • 1
  • 16
  • 17
  • For some reason I can't get the jQuery one to work. I've been placing these inside this function: $(".mobile_text_focus_fix").focus(function(){ var top = document.body.scrollTop; top += 215; window.scrollTo(0,top) }); However, the javascript, I assume that's js, version works, but gives me a new issue. The client will only scroll down to 215px from the bottom of the document. If the client is at the bottom, or less than 215px from it, it causes it to scroll to the 215px from the bottom mark, and if it's just over 215px from the bottom, it only scrolls down to 215px from the bottom. – Eric Mar 07 '13 at 15:55
  • You would add some logic to check is the scollTop reach the `bottom of document - window height`, if yes do nothing, otherwise scroll it. jQuery one should work as I have tested. – Derek Mar 07 '13 at 16:25