Javascript：如何滚动到某个位置但显示完成第一行

Question

通过一个按钮，我想在页面上滚动一定数量的像素（例如，屏幕的高度），但是这样窗口的第一行显示完整，而不是如下图所示（第一行的字母“屏幕上的实体，此时你会看到一些非常明显的抖动。”并不完全可见。

请注意，您无法计算文本中的行数，因为我事先不知道字体的大小或行高，并且在视图中的页面上也使用了不同的大小。

进行滚动时我想得到的是：

这将是一个代码示例：

HTML text (each div class has a different font size and line height; I don't know also 
where the lines of each div are splited, so I don't know he number of lines that result for
each div element):

<div class=salmo>
<div class=latin>
<div class="ps1i">Vidébunt multi et timébunt&nbsp;*</div>
<div class="ps2i">et sperábunt in Dómino.</div>
<div class="ps3">
<div class="ps1i">Beátus vir, qui pósuit Dóminum spem suam&nbsp;*</div>
<div class="ps2i">et non respéxit supérbos<br class="psalm">et declinántes in mendácium.</div>
<div class="ps1i">Multa fecísti tu, Dómine Deus meus, mirabília tua,&nbsp;&dagger;</div>
<div class="ps2i">et cogitatiónes tuas pro nobis:&nbsp;*</div>
<div class="ps2i">non est qui símilis sit tibi.</div>
</div>
<div class="ps1i">Si nuntiáre et éloqui volúero,&nbsp;*</div>
<div class="ps2e">multiplicabúntur super númerum.</div></div>
<div class=engl>Many shall see and fear<br>and shall trust in the Lord.<br>Happy the man who has placed<br>his trust in the Lord<br>and has not gone over to the rebels<br>who follow false gods.<br>How many, O Lord my God,<br>are the wonders and designs<br>that you have worked for us;<br>you have no equal.</div>
<div class=cast>Muchos, al verlo, quedaron sobrecogidos<br>y confiaron en el Señor.<br>Dichoso el hombre que ha puesto<br>su confianza en el Señor,<br>y no acude a los idólatras,<br>que se extravían con engaños.<br>Cuántas maravillas has hecho,<br>Señor, Dios mío,<br>cuántos planes en favor nuestro;<br>nadie se te puede comparar.<br>Intento proclamarlas, decirlas,<br>pero superan todo número.</div>
</div>

Javascript code: 
The button does this:

window.scrollBy(240, 0); 

有办法吗？

提前致谢。