Question: I've got a container div with a bunch of scrollable content (for the record I'm using iScroll - if that changes the solution). When I scroll to the top I want to load content above the current scroll position. If I simply prepend the div using jQuery "prepend();" the contents in my scrollable area shift down. Ideally we'd want to keep the current content in the frame and have the scrollable area grow upwards above the content.

Any thoughts?

Thanks!

Answer: 
According to [the iScroll website](http://cubiq.org/iscroll), it has a method called `scrollToElement`:

> 
> **`scrollToElement(el, runtime)`**: scrolls to any element inside the scrolling area. `el` must be a CSS3 selector. Eg: `scrollToElement("#elementID", '400ms')`
> 
> 
> 

If you always prepend a fixed amount of `div`s (e.g. always a single `div`), I imagine you could use it to scroll to (e.g.) the second element right after you've prepended the new content:

```
// ... (prepend new content)
myScroll.scrollToElement('#scroller :nth-child(2)', '0ms');

```

I haven't tried this, so please let us know if this works for you.
After a quick look through iScroll's source, here's what I've found:

* The current `x` and `y` are always available through `myScroll.x` and `myScroll.y`.
* iScroll has an internal function `_offset(el)`, which returns the `left` and `top` offset of any given element.

This basically opens up two solutions:

1. Use `_offset(el)`. While possible, this is inadvisable. The underscore is a convention for marking a function "private", meaning, amongst other things, that it's not part of the official API.

*or*
2. Use the newly added element's height:

```
var x = myScroll.x;
var y = myScroll.y;

// ... (prepend new content)
y += $('#scroller :first-child').outerHeight();

myScroll.scrollTo(x, y, '0ms');

```

You may need to pass `true` to [`.outerHeight()`](http://api.jquery.com/outerHeight/), which makes it include margins.

Once again, I haven't tested this, so please let us know if it works.