Lock window to div location at top

Question

I want to be able to lock the window to a div top location. So if someone clicks a button, the window top position should be locked at the top of the div. As the window scrolls, it should remain at the top of the div. A user can always click a button to go back up (to the initial location). How can I do this with Jquery.

I use

.bot {
   min-height: 100vh;
}


$('html, body').animate({
    scrollTop: $(".example-shell").position().top
}, 750);

But that scrolls to the top of the div without locking the window in place.

Answer 1

how about position:fixed; top:0px; left:0px position:fixed; top:0px; left:0px position:fixed; top:0px; left:0px ? this makes element's position independent from the parent. Did I got it wrong?

By the way, I was posting this as a comment because that this is probably not the answer but the reputation thing did not allow me.