按照滾動頁面上的光標

Question

在我的頁面上，我每隔幾秒鐘就有一個新的評論框。是他們按照我點擊的評論框的方式。目前如果我點擊它，那個盒子會從另一個盒子的頂部加載並且必須手動向下滾動才能從屏幕上推開。我想自動跟隨那個框，我點擊...重點？

Answer 1

您可以在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但你會看到有一個邏輯問題。上面有很多評論時，無法向上滾動。

Answer 2

您可以使用一個錨：

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

然後

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

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

或者你可以使用JavaScript scrollTo：window.scrollTo(elementPos,0)

Answer 3

所以，設置滾動條，https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

我會實現這2種方法

的觀察者模式與盒子，它知道當新的盒被添加，檢查的標誌。標記本身在任何評論框中都有焦點時設置爲真，當沒有時則爲false。

Scrolltop可能會在UI中產生震動，但也許你可以想出一個方法來設置它的動畫效果，我不會進一步給你餵食。

如果您需要設計模式方面的幫助，請查閱Addy Osmanis書籍！

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/