滚动到div中的元素时更新锚标签

Question

I am not sure if this is possible that is why I am on here asking so if you have any ideas on how this would be possible then I would greatly appreciate it!

Ok say that I have a div that scrolls with overflow-y feature. And say that inside of this div there is a story or large amount of text. Is there anyway to have Javascript memorize or save where you are at in this div maybe through a line number or anchor tag possibly? That way whenever the div is gone, such as if I had javascript change the content of the div, I can prompt the user to click a button and it will return to the spot they were originally at?

I have no approach at this at all! :( The farthest I can think is the simple way of giving each line an anchor tag which is very repetitive and not worth the time and I still wouldn't know how to get the anchor tag on scroll over.

<div style="overflow-y:scroll;height:200px;"> 

<span id="1">This would</span>

<span id="2">be too</span>

<span id="3"> repetitive and</span>

<span id="4">still dont know</span>

<span id="4">how to save the anchor</span>

 </div>

I was thinking for the javascript maybe something like this.

<a href="#" onclick="document.getElementById('***CURRENTSPOT***').id = 'spot';">Save Spot</a>

Then to reload all they would have to do is click this

<a href="#spot">Load Saved Spot</a>

Answer 1

You can try saving the scrollTop property of the parent DOM element and setting that again when the user loads the saved spot.

Check out this MDN article for more details

Heres a quick and dirty implementation: http://jsbin.com/ezexaf/1/edit