在滚动页面上跟随光标答案

【问题标题】：Follow cursor on scrolling page在滚动页面上跟随光标
【发布时间】：2014-04-04 02:17:11
【问题描述】：

在我的页面上，我每隔几秒钟就会有一个新的评论框堆叠在一起。是他们关注我点击的评论框的一种方式。目前，如果我单击它，当另一个框加载到顶部时，该框会被推离屏幕，并且必须手动向下滚动到它。我想自动跟随我点击的那个框...焦点？

【问题讨论】：

【解决方案1】：

你可以使用锚点：

<div id="aDiv"></div>

然后

 location.href = "#";
 location.href = "#aDiv";

或者你可以使用jquery scrollTop：scrollTop: $(this).offset().top

或者你可以使用javascript scrollTo:window.scrollTo(elementPos,0)

【讨论】：

【解决方案2】：

我会实现这两种方式

带有盒子的观察者模式，它知道何时添加新盒子，它检查一个标志。当有焦点在任何评论框上时，标志本身设置为 true，当没有焦点时设置为 false。

Scrolltop 在 UI 中可能会很不和谐，但也许你可以想办法让它动起来，我不会再用勺子喂你了。

如果您需要有关设计模式的帮助，请查看 Addy Osmanis 的书！

【讨论】：

【解决方案3】：

你可以在jQuery中使用scrolltop函数。

//Everytime, you add a comment, scroll the page to the element
$('html, body').animate({
      scrollTop: $("#clickedComment").offset().top
}, 500);

Here's a complete fiddle 但你会发现有一个逻辑问题。上面有很多评论时无法向上滚动。

【讨论】：