SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    how to scroll to bottom of the div

    Hi i set the scroll to bottom of the div on load, then i called ajax for getting updated content, after that i try to set the following coding


    HTML Code:
    var container = $('.im'),
        scrollTo = $('#last');
    
    container.scrollTop(
        scrollTo.offset().top - container.offset().top
    );
    
    from http://jsfiddle.net/xY7tx/

    but not wokred as expected. please any one guide to fix this problem

  2. #2
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Its works when i have added css for the div

    like


    HTML Code:
    <html>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    
    var container = $('.im'),
        scrollTo = $('#last');
    
    container.scrollTop(
        scrollTo.offset().top - container.offset().top
    );
    
    </script>
    <style>
    .im {
        width: 100px;
        height: 70px;
        border: 1px solid blue;
        overflow: auto;
    }
    
    </style>
    <body>
    <div class="im">
    message<br/>
    message<br/>
    message<br/>
    messsage<br/>
    <div id="last">Lastmessage</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    another method for scroll to bottom of div


    HTML Code:
    <html>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    
    $('html, body').animate({ scrollTop: $(".im").height() }, 'slow'); 
    
    </script>
    
    <div class="im">
    message<br/>
    message<br/>
    message<br/>
    messsage<br/>
    messsage<br/>
    messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>messsage<br/>
    Lastmessage
    </div>
    </body>
    </html>
    


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •