Is there a ScrollBottom Equivalent in jQuery or JavaScript?

Question

RESOLVED

@Lesley's answer resolved my issue:

    $('.timeline-wrapper').on('click', function () {
var self = this;
setTimeout(function () {
    divOffset = $(self).offset().top;
    divHeight = $(self).height();
    viewportHeight = $(window).height();

    $('body, html').animate({
        scrollTop : divOffset + divHeight - viewportHeight
    });
}, 1000);

This project uses 2 plugins:

I have modified it so that when a div opens, it will scroll to the top and stop when it's top edge is at the top of the viewport. Now I need it to scroll to the bottom after expanding and then stop when it's bottom edge is at the bottom of the viewport. The following is a stripped down version, but not in any way in original functionality. Only content, so what you see is virtually everything I would use on my site. What I tried is commented in the source.

*colobox.js is actually included with timeliner.js, but I mentioned it because it can standalone.

Most likely area of concern

$('.timeline-wrapper').on('click', function () {
                var self = this;
                setTimeout(function () {
                    xOffset = $(self).offset();
                    $('body, html').animate({
                        scrollTop : xOffset.top
                    });
                }, 910);
        });

SNIPPET

/* ======= CORE LAYOUT ======= */
body {
 position: relative;
  background-color: #222;
  color: #eeefef;
  font-size: 62.5%;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
 height: 200vh;
}
.container {
 position: relative;
 top: 0;
 margin-left: calc(50% - 22em);
  width: 44em;
  padding: 10px;
}
.banner {
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 opacity: 1;
 background-size: contain;
 background-position: left center;
 height: 190px;
}
h1 {
  color: #f8c73e;
  font-size: 36px;
  font-weight: 900;
 letter-spacing: .2em;
 line-height: 2;
  margin: 0 0 0 -20px;
}
h2 {
  font-size: 22px;
  font-weight: 400;
  margin: 5px 0;
  letter-spacing: .1em;
}
h3 {
  font-size: 1.6em;
  margin: 10px 0 10px 10px;
}
a:link,
a:visited {
  color: #7097af;
  text-decoration: none;
}
a:hover {
  color: #0ff;
}
a img {
  border: none;
}
p {
  margin: 0 0 10px 8px;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.6em;
}
.lead {
  font-size: 2em;
  margin-bottom: 40px;
}
.clear {
  clear: both;
  line-height: 0;
  font-size: 0;
}

/* ============ TIMELINER.JS ============= */
.timeline-container {
 position: relative;
 top: 15em;
  bottom: 0;
  border-left: 5px solid #f8c73e;
  margin-left: calc(50% - 300px);
 margin-top: 5px;
  width: 600px;
}
.timeline-toggle {
  background: #000;
  border-color: #161616;
  border-radius: 4px;
  color: #fc3;
  cursor: pointer;
  float: right;
  font-size: 14px;
  margin-right: 40px;
  padding: 3px 5px;
  white-space: pre-line;
 width: 15%;
}
.timeline-time {
 position: relative;
 display: table-row;
}
.timeline-time span.timeline-milestone {
 background: url(../img/milestone.png) left center no-repeat;
 z-index: 1;
 display: table-cell;
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
}

.timeline-time button.time.time {
 font: 500 1.3rem/1.6 "Open Sans";
 text-align: center;
 padding: 0 0 2px 0;
 position: relative;
 z-index: 9;
 background: #f8c73e;
 height: 60px;
 width: 60px;
 border-radius: 50%;
 border: none;
 cursor: pointer;
 color: #000;
 display: table-cell;
}

.timeline-time button.time.time:hover,
.timeline-time button.time.time:active,
.timeline-time button.time.time:focus {
 background: #317bb6; 
 color: #DDD; 
 outline: 0 none transparent; 
} 

.timeline-wrapper {
  clear: left;
  float: left;
  margin: 0 0 12px;
  width: 600px;
 
}
.timeline-wrapper h2 {
  background: transparent;
  font-family: "Open Sans";
  cursor: pointer;
  font-size: 2.2em;
  font-weight: 700;
  margin: 0;
  padding: 4px;
 vertical-align: middle;
}
.timeline-wrapper h2 span {
  background: #f8c73e;
  color: #131313;
  letter-spacing: 0.1em;
  line-height: 1.7em;
  padding: 13px 5px 1px;
}
.timeline-series {
 background: rgba(51,51,51,.3);
  clear: left;
  float: left;
  margin: -14px 12px 0 0;
  padding: 14px 4px 4px 0;
  position: relative;
 border-top-right-radius: 8px;
 border-bottom-right-radius: 8px;
 border: 2px ridge rgba(192,192,192,.6);
 border-left: none;
  width: 600px;
}
.timeline-series dt {
  clear: left;
  font-size: 1.6em;
  list-style-type: none;
  line-height: 1.2em;
  margin: 0 0 12px;
  padding: 0 0 0 55px;
  white-space: nowrap;
 cursor: pointer;
}
.timeline-series dt a {
  color: #f8c73e;
  cursor: pointer;
}
.timeline-series dt a .closed {
  color: #999;
  font-size: 1em;
  margin-left: 0;
}
.timeline-series dt a .open {
  color: #f8c73e;
}
.timeline-series dt a:hover {
  color: #317bb6;
}
.timeline-series dd {
  padding-left: 24px;
  width: 100%;
}
.timeline-series dd h3 {
  color: #FFF;
  clear: both;
  float: left;
  font-size: 1.5em;
  margin: 0 15px 15px 0;
  white-space: pre-line;
}
.timeline-event-content {
  display: none;
}
.timeline-event-content p {
  clear: left;
  float: left;
  line-height: 1.5em;
  margin: 6px 0 10px;
 max-width: 500px;
}
.timeline-event-content h4 {
  clear: left;
  float: left;
  font-size: 1.4em;
  font-weight: 400;
  margin: 10px 0 0;
  padding: 0 0 0 20px;
}
.timeline-event-content blockquote {
  border-left: 2px solid #f8c73e;
  clear: left;
  float: left;
  font-size: 1.8em;
  margin-left: 0;
  padding: 0 30px;
  width: 400px;
}
.timeline-event-content blockquote .attribution {
  font-size: 0.7em;
  text-align: right;
}
.timeline-event-content .media {
  float: left;
 clear: both;
  padding: 0 0 12px;
  width: 300px;
}
.timeline-event-content .media img {
 clear: both;
  border: 2px solid #000;
  margin: 0;
}
.timeline-event-content .media p {
  font-size: 1.2em;
 clear: both;
  margin: 0;
  padding: 0;
}
.timeline-event-content .media a:link,
.timeline-event-content .media a:visited {
  color: #f8c73e;
}
.timeline-event-content .media a:hover {
  color: #317bb6;
}
h3 ~ p, .media ~ p {
 padding: 10px;
 background: rgba(51,51,51,.7);
 box-shadow: 8px 8px 6px (234,205,231,1);
 border-radius: 4px;
}
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999999; overflow:visible;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; }
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(..img/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../img/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(../img/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(../img/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../img/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../img/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../img/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:visible;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; font-size: 1.3em; width:100%; color:;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#317bb6;}
        #cboxLoadingOverlay{background:url(../img/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../img/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:hidden; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}
    .CBmodal { font-size: 1.3em; color: #00E1E1; margin: 10px 0;}

/* UI */


input::-moz-focus-inner { border: 0; padding: 0; margin-top:-2px; margin-bottom: -2px; } 

/* Smartphones (landscape and portrait) ----------- */
@media screen and (max-width: 768px) {

    * {
        max-width: 720px;
    }

    body {
        font-size: normal;
    }

    .container {
       padding:10px;
    }

    div.timelineToggle {
       float:none;
    }

    .timelineEvent div.media {
        display:none;
        float:none;
    }

    .timelineMinor dt {
       font-size:1.2em;
       white-space: normal;
    }

    .timelineMinor dd h3 {
       font-size:1em;
       white-space: normal;
    }

    div#timelineContainer {
    }

    .timelineMinor dd {
        margin-left:20px;
        padding-left:0;
        width:100%;
    }

    .timelineEvent .media p {
       font-size:1em;
    }

    dl.timelineMinor {
       float:none;
       max-width:80%;
    }

    .timelineEvent p {
       float:none;
       width:100%;
    }

    .timelineEvent blockquote {
       float:none;
       width:200px;
       font-size:1em;
    }
}
 @media screen and (max-width:700px) {
   .timeline-container { max-width: 100%; }
 }
/* Smartphones (landscape and portrait) ----------- */
@media screen and (max-width: 540px) {

    * {
        max-width: 520px;
    }

    body {
        font-size: normal;
    }

    .container {
       padding:10px;
    }

    div.timelineToggle {
       float:none;
    }

    .timelineEvent div.media {
        display:none;
        float:none;
    }

    .timelineMinor dt {
       font-size:1.2em;
       white-space: pre-line;
    }

    .timelineMinor dd h3 {
       font-size:1em;
       white-space: pre-line;
    }

    div#timelineContainer {
    }

    .timelineMinor dd {
        margin-left:20px;
        padding-left:0;
        width:100%;
    }

    .timelineEvent .media p {
       font-size:1em;
    }

    dl.timelineMinor {
       float:none;
       max-width:80%;
    }

    .timelineEvent p {
       float:none;
       width:100%;
    }

    .timelineEvent blockquote {
       float:none;
       width:200px;
       font-size:1em;
    }
}
 @media screen and (max-width:500px) {
   .timeline-series { width: 100%; }
.bq, .bq span, .timeline-event-content p, .timeline-wrapper { width: 100%; }
 }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

    * {
        max-width: 300px;
    }

}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>HTL1942-2013</title>
 
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet'>
  <style>
  .modalBox { background: none; color: #eee;}
  a.CBmodal.cboxElement.CBmodal.cboxElement { color: rgba(0,0,255,1); }
  a.CBmodal.cboxElement.CBmodal.cboxElement:hover, a.CBmodal.cboxElement.CBmodal.cboxElement:active { color: rgba(0,128,255,1); }
   
  .timeline-container { top: 10em; }
    li { font-size: 1rem; }
    #colorbox, #cboxOverlay, #cboxWrapper{ position:fixed; top:0; left:0; z-index:9999; overflow:hidden; } 
    .ext { position: relative; bottom: -9em; height: 25%; border-left: 5px solid #fc3; margin-left: calc(50% - 300px); margin-top: 5px; width: 0; overflow: hidden; } 
  </style>
</head>
<body>

 <div class="container">
  
   <div class="banner">
    
    </div>
  
 </div>
  <div id="timeline" class="timeline-container">

   <button class="timeline-toggle"></button>
<br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">1</button></h2>
    <dl class="timeline-series">
     <dt id="1" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="1EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">2</button></h2>
    <dl class="timeline-series">
     <dt id="2" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="2EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">3</button></h2>
    <dl class="timeline-series">
     <dt id="3" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="3EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">4</button></h2>
    <dl class="timeline-series">
     <dt id="4" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="4EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">5</button></h2>
    <dl class="timeline-series">
     <dt id="5" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="5EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->
<br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">6</button></h2>
    <dl class="timeline-series">
     <dt id="6" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="6EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->

<br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">7</button></h2>
    <dl class="timeline-series">
     <dt id="7" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="7EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->


  <br class="clear">
    
    <div class="timeline-wrapper">
    <h2 class="timeline-time"><button class="time">8</button></h2>
    <dl class="timeline-series">
     <dt id="8" class="timeline-event"><a>Title</a></dt>
     <dd class="timeline-event-content" id="8EX">
      <h3>Date</h3>
      <p>Text</p>
      <br class="clear">
     </dd><!-- /.timeline-event-content -->
    </dl><!-- /.timeline-series -->
   </div><!-- /.timeline-wrapper -->

   <br class="clear">
      <button class="timeline-toggle"></button>
 </div><!-- /#timelineContainer -->

<div class="ext"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 <script src="https://technotarek.com/timeliner/js/timeliner.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
 <script>
  $(document).ready(function() {
   $.timeliner({
    oneOpen: true,
    startState: 'flat',
    expandAllText: '+ Show All',
    collapseAllText: '- Hide All'
   });
   // Colorbox Modal
   $(".CBmodal").colorbox({inline:true, initialWidth:100, maxWidth:685, initialHeight:100, transition:"elastic",speed:750});
    $(".iframe, .cboxIframe").colorbox({iframe:true, width:"90%", height:"100%" ,transition:"elastic",speed:750});

    
  $('a').click(function(e) {
   e.preventDefault();
  });
  $('.timeline-wrapper').on('click', function () {
    var self = this;
    setTimeout(function () {
                    // Tried a couple of ways to make xOffset a negative number.
     xOffset = $(self).offset();
     $('body, html').animate({
      scrollTop : xOffset.top
     });
    }, 910);
  });
});


 </script>

</body>
</html>

PLUNKER

http://stackoverflow.com/questions/4655273/jquery-window-scrolltop-but-no-window-scrollbottom http://stackoverflow.com/questions/4188903/opposite-of-scrolltop-in-jquery http://stackoverflow.com/questions/12797224/getting-the-scrollbottom-using-jquery as far as i understood the previous answers, they use scrolltop but add window.height to the pixel offset, so it actually scrolls to the bottom... — errand, May 18 '16 at 09:40
I applied the first answer by replacing the `xOffset` expression with it and it went up further. If you take a look at the code at the bottom, I use xOffset =`$(window).scrollTop() + $(window).height();` $('body, html').animate({ scrollTop : xOffset.top The highlighted part is the replacement from the first link. — zer00ne, May 18 '16 at 10:00
I really couldn't see how I could apply the other 2 posts. I believe I'm brain farting an obvious yet crucial part... — zer00ne, May 18 '16 at 10:02

Lesley · Accepted Answer · 2016-05-20T10:54:36.130

2

So you want the bottom of the timeline-wrapper div to be at the bottom of the viewport? I think this does it:

$('.timeline-wrapper').on('click', function () {
    var self = this;
    setTimeout(function () {
        divOffset = $(self).offset().top;
        divHeight = $(self).height();
        viewportHeight = $(window).height();

        $('body, html').animate({
            scrollTop : divOffset + divHeight - viewportHeight
        });
    }, 910);
});

edited May 20 '16 at 10:54

answered May 18 '16 at 10:52

Lesley

1,395
12
11

Thank you, @Lesley. I tried it and failed. Tested and compared, realized I needed a delay set. Works perfectly. Thank you very much! That saved me days of bashing my head into the wall! :D – zer00ne May 18 '16 at 19:18

score 0 · Answer 2 · answered Sep 29 '17 at 07:41

0

None of the above answers worked for me except this jquery

$('#parentdiv, div:nth-last-child(-n)').animate({scrollTop:$("#parentdiv").prop("scrollHeight")}, 'fast');

provided by this site Scroll to the bottom of a page with jQuery

answered Sep 29 '17 at 07:41

Ocool Sanni

29
3

Is there a ScrollBottom Equivalent in jQuery or JavaScript?

RESOLVED

SNIPPET

2 Answers2