How to scroll HTML Page all the way down and restart again from top?

问题

I have a HTML page that is just simple html page with a table with about 100 rows.

I would like to scroll my HTML Page all the way down and then once it has finished scrolling, either restart the scrolling from the top or to reverse the scrolling back to top again.

I have found an example online: https://jsfiddle.net/maherhossain/a24nymv1/. However, this only works horizontally. I have tried to do this vertically and have submitted the code below.

I am not getting any errors. The table is being loaded. Its just that the automatic scrolling is not working.

I would appreciate any help. Many Thanks in advance.

HTML:

<div id="scroll">
    <body>
          <table class="content-table" id="demo">
          <th></th>
          <tr></tr>
          <tr></tr>
          ....
          </table>

    </body>
</div>

CSS:

#scroll { white-space: nowrap; overflow-y: scroll; }

Javascript + jQuery:

<script>

function animatethis(targetElement, speed) {
    var scrollHeight = $(targetElement).get(0).scrollHeight;
    var clientHeight = $(targetElement).get(0).clientHeight;
    $(targetElement).animate({ scrollTop: scrollHeight - clientHeight },
    {
        duration: speed,
        complete: function () {
            targetElement.animate({ scrollTop: 0 },
            {
                duration: speed,
                complete: function () {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};
animatethis($('#scroll'), 5000);

回答1:

Hello You need to set height to the targetElement through css . please checkout below

function animatethis(targetElement, speed) {
    var scrollHeight = $(targetElement).get(0).scrollHeight;
    var clientHeight = $(targetElement).get(0).clientHeight;
    $(targetElement).animate({ scrollTop: scrollHeight - clientHeight },
    {
        duration: speed,
        complete: function () {
            targetElement.animate({ scrollTop: 0 },
            {
                duration: speed,
                complete: function () {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};
animatethis($('#scroll'), 5000);

#scroll {overflow-y: scroll; width:100%; height:200px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" >[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]</div>

来源：https://stackoverflow.com/questions/60785333/how-to-scroll-html-page-all-the-way-down-and-restart-again-from-top

标签

javascript

jquery

html

css

scroll