jump to the bottom of a div on load

Question

I have build vertical timeline but after I have finished I realised that my oldest events are at top and newer are added below. So I have decided to make this div with height of 270px and overflow:overlay (this div is parent to my timeline events, all events have own divs - it has now height cca of 6000px all ) to be always jumped at the bottom of the timeline in order to see the current events.

My parent div to these events has class .TIMELINEcolumn
Script that I found online is this $('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

What I have put at bottom of my page is this:
<script> $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight); </script>

But no success, I also tried putting this script to the head of the document and also no success. I have also find some pure css approach with using display:flex and than applying reversed direction but that is not what I was looking for. It looks simple but for me its super complicated. At first I actually wanted to have working anchors to those events on timeline but even this simple task to always jump to the bottom of a div on load is a nightmare for me. If anybody would have clue, please try to explain a bit in primitive fashion so your code can be understood also by me. Thanks a lot.

score 2 · Accepted Answer · answered Jun 19 '17 at 20:25

2

This is one correct way to do it.

1) Insert this 100% pure HTML anchor tag on endings of your page, where you want your page to scroll to:

<a name="pointToScrollTo"></a>

2) Then, using a little of javascript, force your page to scroll down there, by using this inside your BODY tag, on the beginning of the html part of your page:

javascript:document.location='test.html#pointToScrollTo'

So your BODY tag could be in this final format:

<body onload="javascript:document.location='test.html#pointToScrollTo';">

There you substitute test.html, on my example, with the name of your page, and just the name of the page, i.e., you do not need to insert all your url here, not absolute nor relative.

That's it. 100% W3C compatible.

For reference: https://www.w3.org/MarkUp/1995-archive/Elements/A.html

answered Jun 19 '17 at 20:25

statosdotcom

3,109
2
17
40

Thanks a lot. Wow, so simple, in theory it should work, it makes clear sense. Javascript in body tag worked and triggered on load (i saw a change in the url when accessing my page) but it did not jump to the anchor. I have also checked if my timeline.php generates it and it does, so I am only thinking that it does not work because javacript execute too quick on load and maybe it does not have that anchor served at that point yet. Thanks a lot. I will also try now answers from others and see. – Brano Jun 20 '17 at 15:37
Brano, thank you for your return. I am disappointed it didn't work. Please, be sure you put the anchor `` at the end of the page, i.e. probably after your important div (or, as a test, make it the last thing on your page). Best luck. – statosdotcom Jun 20 '17 at 15:40
Excuse me, thinking again, if you do not find a better way to get it, maybe you can implement some workaround here, with some additional adaptation in my code to better fit your needs. One approach would be to take off my suggested javascript from the **body** tag and put it "alone" (of course, inside the needed ) at the end of your page. But better than that, I think it would worth to try some kind of solution like putting the "get anchor" command inside your **div**, at its end, so every time your timeline gets new content, every time it loads, it scrolls to the end. – statosdotcom Jun 20 '17 at 16:10
statosdotcom I was mistaken, your code works! I just have not noticed it because my parent div had relative position and event divs inside had position absolute and specified distance from top. Therfore my anchor point was supposed to have also specified distance from top in order to appear in a bottom (that is where I made mistake). Awesome and thanks a lot. Just one last question, do you think, I can animate the scrolling on load for 0.5s? If it is complicated lets ignore this request. – Brano Jun 21 '17 at 08:55
Here is my example, but I still need to correct this timeline in many ways. It is my very first thing in coding. Besides some static html pages with some css. http://focuscz.8u.cz/PAGES/SANDBOX/timeline/lists.php – Brano Jun 21 '17 at 09:22
My friend, thank you for your return. I will search for a way to make it scroll, not jump. Please, wait a little. Thank you. – statosdotcom Jun 22 '17 at 14:28

score 0 · Answer 2 · answered Jun 19 '17 at 20:09

0

I wouldn't know about scroll events (yet). But instead of making the page jump all over the place (6000px is a lot of scrolling on your average screen), how about reversing all of the elements?

Have a look at this answer. It's to reverse all elements. The gist of it is below:

ul = $('#my-ul'); // your parent ul element
ul.children().each(function(i,li){ul.prepend(li)})

Appended to your naming:

$timeline = $('.TIMELINEcolumn');
$timeline.children().each(function(key, child) {
    $timeline.prepend(child)
});

answered Jun 19 '17 at 20:09

rkeet

3,406
2
23
49

Hi Nukeface, as I mentioned I have tried applying flex and flex-reversed which does something similar as you have described, unfortunately, switching the direction of my timeline would mean that I would have to write the php for generating events from the scratch all over. Therefore I have used anchor to solve this and jump to the bottom. Thanks a lot for reacting on my request. – Brano Jun 21 '17 at 09:01

score 0 · Answer 3 · answered Jun 19 '17 at 20:21

It seems that you are using jquery onload with jquery means using your code inside $(document).ready() function as follows:

$(document).ready(function(){
      $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight);
})

Of course this should works if that code $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight); works with any other event i.e it is correct code. For test try the following:

// at the top inside your body tag insert the following:

<a href="javascript:scrollto()">Scroll to bottom</a>

Then at the end of your head tag place the following:

<script>
   function scrollto(){
      $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight);
   }
</script>

If the click on the link Scroll to bottom works fine, so it would work fine with $(document).ready() too.

Thanks SaidbakR, I have tried it but for some reason it does not work. I have included that to body and also to my head of the document, but it did not work. I like this idea, because I would not need div with anchor. Do you think I need to put this $(document).ready() somewhere to my code as well? Here is that "not working example". http://focuscz.8u.cz/PAGES/SANDBOX/timelineOnclick/lists.php — Brano, Jun 21 '17 at 10:09

score -1 · Answer 4 · answered Jun 19 '17 at 20:06

-1

You can do something as simple as this. On window load, set url target to the hash for the div target. If you have an autoscroller enabled, it will scroll rather than jump.

window.document.onload = function(e){ 
        window.location.href = 'www.yourwebaddress.com/#targetdiv';
    }

<div id ="targetdiv"></div>

answered Jun 19 '17 at 20:06

Korgrue

3,430
1
13
20

1

Hi Korgrue, thanks for this idea, in fact I have used something similar with help of guy named here as statosdotcom. Thanks for help. – Brano Jun 21 '17 at 09:03

jump to the bottom of a div on load

4 Answers4