how to restart scrolling marque when the last text line in container text reaches the target margin?

Question

I am trying to restart the scrolling marque everytime the last line of text in the pre reaches the target margin to the top? It can be 1 line, 50 lines or 100 lines.

I looked at a few examples here and got the scroll from start target to end target and restarts when reached to end to work, but it restarts the animation half way, I need the last text inside the 'pre' to reach to the target at the top and then restart the animation again from the bottom. I hope it makes sense and sorry for bad grammer.

Here's the HTML:

<pre id="text">
text 1<br>
text 2<br>
text 3<br>
text 4<br>
text 5<br>
text 6<br>
text 7<br>
text 8<br>
text 9<br>
text 10<br>
</pre>

CSS:

pre#text{display:block;overflow:hidden;}

jQuery:

function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "-50px"},
{
    duration: speed,
    complete: function ()
    {
        $(targetElement).css('marginTop','590px');
        animatethis(targetElement, speed);
    }
});
};
animatethis($('pre#text'), 5000);

Here's link to JSFiddle: https://jsfiddle.net/1kfpbcyo/

Answer 1

The problem is that you're defining manually the -50px while this needs to be the full height of the div :

function animatethis(targetElement, speed) {
    var height = $( "#text" ).height();
    $(targetElement).animate({ marginTop: -height},
    {
        duration: speed,
        complete: function ()
        {
            $(targetElement).css('marginTop','590px');
            animatethis(targetElement, speed);
        }
    });
};

animatethis($('pre#text'), 5000);

pre#text{display:block;overflow:hidden;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<pre id="text">
text 1<br>
text 2<br>
text 3<br>
text 4<br>
text 5<br>
text 6<br>
text 7<br>
text 8<br>
text 9<br>
text 10<br>
</pre>