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

134
February 22, 2022, at 11:00 AM

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);
Rent Charter Buses Company
READ ALSO
multiple pages are overlapping in ngx-extended-pdf-viewer

multiple pages are overlapping in ngx-extended-pdf-viewer

I am using ngx-extended-pdf-viewer for my angular app and looks like multiple pdf pages are overlapping during viewinghere is my viewer code

125
How do I compare and verify user input field to stored data BEFORE to sending form in ColdFusion

How do I compare and verify user input field to stored data BEFORE to sending form in ColdFusion

I’m updating a site for my brother who teaches training coursesHe has a registration form on the site that collects name, age, address, etc

117
Is there an easy way to allow an html document to scroll left and right?

Is there an easy way to allow an html document to scroll left and right?

I was making a webpage with a spiderweb style design, meaning content would move out and to the left and right as the user browsed

116
How do I change the font style of text displayed on hover with CSS?

How do I change the font style of text displayed on hover with CSS?

I feel like this should be an easy one but nothing I'm doing seems to be workingI may be targeting the element wrong or may be inputting the wrong CSS - I'm fairly new to the coding side of things so any help would be appreciated

114