How to move the window by x number of pixels using Javascript

Question

How do I scroll a window or webpage down using Javascript? Basically, I want to move the web page down by certain number of pixels, using Javascript is there any way of doing that?

Answer 1

You can use the following function:

window.scrollBy(x,y) 

e.g.

window.scrollBy(0,100) 

Since you expressed interest in the "units" (I assume you mean width and height, since the units here are pixels!) if a window is resized:

document.height 1527  window.innerHeight 912 

---

" awesome. But is there anyway to scroll based on if window has been resized? "

Yes, you can use this event handler:

window.onresize = function() {     window.scrollBy(..., ...); } 

https://developer.mozilla.org/en/DOM/window.onresize

Answer 2

I've always used jQuery to do this before so if you're interested. . .

The viewport can be scrolled with using scrollTop ( http://api.jquery.com/scrollTop/ ):

 $(window).scrollTop(value) 

You can find the current offset of an element using offset ( http://api.jquery.com/offset ):

$(element).offset().top 

and you can find out the window's current scroll through scrollTop too:

$(window).scrollTop() 

Using those methods you're able to find out the current window's scroll position, determine where you want to scroll to, and scroll from one section to the other using scrollTop, or if you wanted it to be smooth and animated over time — animate ( http://api.jquery.com/animate ).

If you wanted to do an event based on browser resize, then you'd simple bind a function to the resize event:

$(window).bind('resize', myfunction);