Jump div to bottom with out scrolling the page

user1712804

I have an inner div that contains a list with the most recent list item being at the bottom. The div is part of a larger page. Essentially i want the div to default to the end of the list item and the user will then scroll upwards within the div to see the older content. I do not want the page to be scrolled to the bottom of the div which would occur if i used the following function

//Slide chat down to bottom
$("#div").scrollTop(function(){
    return $(this).height();
});

The outer div would be the page at large. therefore the user would need to scroll down to the inner div and then see the last list item. If they want they can then use the inner scroll bar to look up older items

thanks

Zoltan Toth

You can do that in plain JavaScript:

var inner = document.querySelector('.inner');
inner.scrollTop = inner.scrollHeight;

DEMO

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to stick div to bottom page no scrolling

From Dev

Show div at top of page, hide when scrolling, then show div at bottom of page

From Dev

lightbox scrolling past page bottom

From Dev

Page not scrolling all the way to the bottom

From Dev

lightbox scrolling past page bottom

From Dev

set bottom of page to bottom of div

From Dev

avoid automatic jump to bottom on page with iframe video

From Dev

Jump to the bottom of the page with jQuery - Without animation

From Dev

Why does the page jump to the bottom on load?

From Dev

Align DIV to bottom of the page

From Dev

Links jump to top and bottom but smooth scrolling doesn't work

From Dev

Jump page with animation - menu to div

From Dev

Keep footer at the bottom of the page (with scrolling if needed)

From Dev

Bugs appending rows to table and scrolling to bottom of page

From Dev

One Page Checkout scrolling to the bottom of screen on next

From Dev

Detect the scrolling to bottom of the page using Dart

From Dev

Why is my page automatically scrolling to the bottom/

From Dev

Appending div to page cause entire page to jump

From Dev

CSS - DIV not scrolling to the bottom, when height is 100%

From Dev

How to fadeIn a div at the bottom of the window when scrolling?

From Dev

div in bottom-center without scrolling

From Dev

How to fadeIn a div at the bottom of the window when scrolling?

From Dev

Javascript - Scrolling the div instead of the page

From Dev

JS Smooth scrolling, scroll to bottom of final / bottom div instead of top

From Dev

How to place this div to the bottom of the page

From Dev

Bootstrap div stretch to bottom of page

From Dev

Align div to bottom of the page in bootstrap

From Dev

Slide in a div from bottom of the page?

From Dev

Jquery - stick div to bottom of the page

Related Related

  1. 1

    How to stick div to bottom page no scrolling

  2. 2

    Show div at top of page, hide when scrolling, then show div at bottom of page

  3. 3

    lightbox scrolling past page bottom

  4. 4

    Page not scrolling all the way to the bottom

  5. 5

    lightbox scrolling past page bottom

  6. 6

    set bottom of page to bottom of div

  7. 7

    avoid automatic jump to bottom on page with iframe video

  8. 8

    Jump to the bottom of the page with jQuery - Without animation

  9. 9

    Why does the page jump to the bottom on load?

  10. 10

    Align DIV to bottom of the page

  11. 11

    Links jump to top and bottom but smooth scrolling doesn't work

  12. 12

    Jump page with animation - menu to div

  13. 13

    Keep footer at the bottom of the page (with scrolling if needed)

  14. 14

    Bugs appending rows to table and scrolling to bottom of page

  15. 15

    One Page Checkout scrolling to the bottom of screen on next

  16. 16

    Detect the scrolling to bottom of the page using Dart

  17. 17

    Why is my page automatically scrolling to the bottom/

  18. 18

    Appending div to page cause entire page to jump

  19. 19

    CSS - DIV not scrolling to the bottom, when height is 100%

  20. 20

    How to fadeIn a div at the bottom of the window when scrolling?

  21. 21

    div in bottom-center without scrolling

  22. 22

    How to fadeIn a div at the bottom of the window when scrolling?

  23. 23

    Javascript - Scrolling the div instead of the page

  24. 24

    JS Smooth scrolling, scroll to bottom of final / bottom div instead of top

  25. 25

    How to place this div to the bottom of the page

  26. 26

    Bootstrap div stretch to bottom of page

  27. 27

    Align div to bottom of the page in bootstrap

  28. 28

    Slide in a div from bottom of the page?

  29. 29

    Jquery - stick div to bottom of the page

HotTag

Archive