Как прокрутить страницу HTML вниз и перезапустить сверху? - PullRequest
Новая
       1

Как прокрутить страницу HTML вниз и перезапустить сверху?

0 голосов
/ 21 марта 2020

У меня есть HTML страница, которая является простой html страницей с таблицей из примерно 100 строк.

Я хотел бы прокрутить мою HTML страницу полностью вниз, а затем один раз завершил прокрутку, либо перезапустите прокрутку сверху, либо снова поверните прокрутку назад к вершине.

Я нашел в сети пример: https://jsfiddle.net/maherhossain/a24nymv1/. Однако это работает только горизонтально. Я попытался сделать это по вертикали и отправил код ниже.

Я не получаю никаких ошибок. Таблица загружается. Просто автоматическая прокрутка c не работает.

Буду признателен за любую помощь. Большое спасибо заранее.

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 Ответ

2 голосов
/ 21 марта 2020

Здравствуйте. Вам нужно установить высоту для targetElement через css. пожалуйста, проверьте ниже 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...