zer00ne zer00ne - 6 months ago 16
Javascript Question

Is there a ScrollBottom Equivalent in jQuery or JavaScript?

RESOLVED



@Lesley's answer along with an added delay 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





<!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'>
<link rel="stylesheet" href="https://glsbx.s3.amazonaws.com/htl/v3/css/htl4.css">
<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); }
.banner { background: url(https://glsbx.s3.amazonaws.com/htl/v3/img/banner2.svg) no-repeat; background-size: contain; }
/* .banner { background: url(https://glsbx.s3.amazonaws.com/htl/v3/img/banner3.png) no-repeat; background-size: contain; width:720px; position: absolute; left: -14.5em; }*/
.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/1.9.1/jquery.min.js"></script>
<script src="https://glsbx.s3.amazonaws.com/htl/v3/js/timeliner.min.js"></script>
<script src="https://glsbx.s3.amazonaws.com/htl/v3/js/colorbox.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

Answer

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);
});