How do I scroll to the right on a page that overflows horizontally?

Question

I want to scroll to the far right edge of a page that is really wide (it's wide on purpose) when the user closes a modal (specifically, the Reveal modal in Foundation 4).

I've tried setting an id on a div that's aligned all the way right, but that obviously doesn't work.

Answer 1

To scroll horizontally, you use scrollLeft().

$('body, html').scrollLeft(400);

jQuery also supports animating the scrollLeft property.

To scroll all the way to the right, you get the full width of the page, and subtract the window width to get the left edge :

var left = $(document).outerWidth() - $(window).width();
$('body, html').scrollLeft(left);

Answer 2

You actually can do it with a div ID. If you have a div like this:

<div id="divid" style="position: absolute; left: 9000px;">Far Right</div>

Then just change your location.hash to match:

location.hash = "divid";

The browser will take care of scrolling for you.