Use Jquery to Scroll to the Bottom of a Div with Lots of Text

Use jQuery to scroll to the bottom of a div with lots of text

please refer : .scrollTop(), You can give a try to the solution here : http://jsfiddle.net/y430ovjt/

$(function() {  var wtf    = $('#scroll');  var height = wtf[0].scrollHeight;  wtf.scrollTop(height);});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="scroll">    <br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/>blah<br/>halb<br/> <center><b>Voila!! You have already reached the bottom :)<b></center></div>

Scroll to bottom of Div on page load (jQuery)

The other solutions here don't actually work for divs with lots of content -- it "maxes out" scrolling down to the height of the div (instead of the height of the content of the div). So they'll work, unless you have more than double the div's height in content inside of it.

Here is the correct version:

$('#div1').scrollTop($('#div1')[0].scrollHeight);

or jQuery 1.6+ version:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

Or animated:

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

Scroll to bottom of div?

Here's what I use on my site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

jQuery scroll an element to the bottom

Yes:

$("#container").scrollTop($("#elementToScrollTo").position().top);​

If you want to go smoothly:

$("#container").animate({
    scrollTop: $("#elementToScrollTo").position().top
}, 1000);

Here, have a fiddle: http://jsfiddle.net/adrianonantua/nxHE8/

Jquery scroll animation scrolles to bottom of div instead of top

The issue is because offset().top does not account for the height of the .header element, so the content is aligned underneath it.

To fix this simply retrieve the outerHeight() of .header and subtract it from offset().top.

Also note that you can DRY up the multiple click handlers by using a single selector to retrieve them all then targeting the element to scroll to by linking the id of the clicked a element. Try this:

var navHeight = $('.header').outerHeight();
$(".header a").click(function() {  $('html,body').animate({    scrollTop: $("." + this.id).offset().top - navHeight  }, 'slow');});

* {  box-sizing: border-box;}
body {  margin: 0;  font-family: Arial, Helvetica, sans-serif;  background-color: #10171e;  color: white;}
img {  width: 100%;}
.header {  margin-bottom: 100px;  position: fixed;  width: 100%;  overflow: hidden;  background-color: #15202b;  padding: 20px 10px;}
.header a {  float: left;  color: white;  text-align: center;  padding: 12px;  text-decoration: none;  font-size: 18px;  line-height: 25px;  border-radius: 4px;}
.header a:hover {  background-color: #ddd;  color: black;}
.header-right {  float: left;}
.home {  /*margin-bottom: 500px;*/}
.about {  background: red;  /*height: 1000px;*/  /*margin-top: 500px;*/  /*margin-bottom: 500px;*/  width: 60%;  margin-left: 20%;}
.contact {  background-color: blue;  height: 1000px;  /*margin-top: 500px;*/  /*margin-bottom: 500px;*/  width: 60%;  margin-left: 20%;}

}@media screen and (max-width: 500px) {  .header a {    float: none;    display: block;    text-align: left;  }    .header-right {    float: none;  }}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="home">  <div class="header">    <a class="nav" href="#" id="home">Home</a>    <a class="nav" href="#" id="about">About</a>    <a class="nav" href="#" id="contact">Contact</a>  </div>  <img src="img/programmer1.png" alt="programmer">  <a id="button" class="arrow bounce" href="#"></a></div><div class="about">  <p class="P1">Waarom gebruiken we het? Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min    of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun    standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p></div><div class="contact">  <p>Waarom gebruiken we het?Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min    of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun    standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).  </p></div>

Scrolling bottom div with jquery

You can use scrollHeight property of the DOM Element object.

Height of the scroll view of an element; it includes the element padding but not its margin.

var $box = $('#boxcoment'); 
var height = $box.get(0).scrollHeight;
$box.scrollTop(height);

Keep overflow div scrolled to bottom unless user scrolls up

I was able to get this working with CSS only.

The trick is to use:

display: flex;
flex-direction: column-reverse;

The browser treats the bottom like its the top. Assuming the browsers you're targeting support flex-box, the only caveat is that the markup has to be in reverse order.

Here is a working example. https://codepen.io/jimbol/pen/YVJzBg

Detecting when user scrolls to bottom of div with jQuery

There are some properties/methods you can use:

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

So you can take the sum of the first two properties, and when it equals to the last property, you've reached the end:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

Edit: I've updated 'bind' to 'on' as per:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

Smooth scroll to div id jQuery

You need to animate the html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

---

Related Topics