滚动到div中的某个元素时更新锚标签 [英] Update anchor tag as you scroll past an element in a div

问题描述

我不确定这是否可行，这就是为什么我要在这里问，所以如果您对如何实现这一目标有任何想法，那么我将不胜感激！

好的，我有一个具有溢出Y功能的div滚动条.并说在这个div内有一个故事或大量文字.无论如何，是否有可能通过行号或锚标记来记住或保存Java在这个div中的位置?这样，只要div消失了(例如，如果我用JavaScript更改了div的内容)，我都可以提示用户单击一个按钮，它将返回到原来的位置?

我根本没有办法！ :(我能想到的最简单的方法是给每行一个锚标记，这是非常重复的，不值得花时间，而且我仍然不知道如何在滚动时获得锚标记的简单方法.

<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>

我正在考虑使用javascript这样的东西.

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

然后重新加载所有他们需要做的就是单击此

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

解决方案

您可以尝试保存父DOM元素的scrollTop属性，并在用户加载保存的位置时再次进行设置.

查看此MDN文章以了解更多详细信息

这里有一个快速而肮脏的实现: http://jsbin.com/ezexaf/1/edit

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>

解决方案

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

这篇关于滚动到div中的某个元素时更新锚标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！