0

Through a button, I want to scroll on a page a certain amount of pixels (for example, the height of the screen), but so that the first line of the window appears complete, and not as in the following image (the letters of the first line "entities on the screen, at which point you see some pretty noticeable jitter." are not completely visible.

Example. Look at the first line.

Note that you can not calculate the number of lines in the text, because I do not know the size of the font or the line height in advance, and also different sizes are used along the page that is in view.

What I would like to get when doing the scroll is this:

Result I'd like to get

This would be a code example: 

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

Is there a way to do it?

Thanks in advance.

rcerecedar
  • 412
  • 1
  • 4
  • 13
  • Possible duplicate of [jQuery Scroll to Div](https://stackoverflow.com/questions/5284814/jquery-scroll-to-div) – Stender Oct 13 '17 at 08:16
  • what wraps your text? Do you wrap each line or the text wrapper by only 1 element? – Güney Saramalı Oct 13 '17 at 08:20
  • Güney, thanks for your fast answer.Let´s try to explain it better: In the previous image, I'd like to see the line that says "entities on the screen, at which point you see some pretty noticeable jitter." , but since the scrollto position was in the middle of the line, I'd need to scroll back a certain unknown number of pixels to see perfectly the letters. – rcerecedar Oct 13 '17 at 08:26
  • 1
    Please include your code in a **[Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve)** so we can see what you are doing and how we might be able to help. – FluffyKitten Oct 13 '17 at 08:32
  • My text has a lot of div elements, but there is no way to know the finally height of any of them. The lines are not wrapped individually. – rcerecedar Oct 13 '17 at 08:33

0 Answers0