How to scroll my dynamically generated HTML Page all the way down and start scrolling again from the top?
Question
I have a HTML page that is just simple html page with an empty table tag.
This table is filled using a javascript function. I basically read a file and fill rows from the data of the file. This part I have implemented properly.
I have 100 table rows. I would like to scroll my HTML Page all the way down and then once it has finished scrolling starting to reverse the scroll 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 onload="loadXMLDoc()">
<table class="content-table" id="demo"></table>
/div>
CSS:
#scroll { white-space: nowrap; overflow-y: scroll; }
Javascript:
<script>
// {} ...Function to load the file in table
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 answers
solution1
0 2020-03-19 00:07:30
scrollDown isn't an animation. Try scrollTop. You may have to rethink the math behind it though.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.