Is there a way to make an element positioned at the bottom of a container appear at the top of the page when clicked? You can see an example of what I mean in this jsfiddle:
http://jsfiddle.net/scientiffic/v7CBu/5/
I have a scrollable container ("container") that contains different elements. When clicking on links, the container scrolls to these elements within it. However, if one of the elements like "3" is at the bottom of the container, it cannot be brought to the top when clicked. How can I achieve this?
HTML:
<div class="container">
<div class="subcontainer 1"><h1>1</h1></div>
<div class="subcontainer 2"><h1>2</h1></div>
<div class="subcontainer 3"><h1>3</h1></div>
</div>
<div class="controllers">
<div class="controller" id="1">jump to 1</div>
<div class="controller" id="2">jump to 2</div>
<div class="controller" id="3">jump to 3</div>
</div>
Javascript:
$(document).ready(function(){
$('#1').click(function(){
$('.container').animate({
scrollTop: $('.subcontainer.1').position().top + $('.container').scrollTop()
}, 500);
});
$('#2').click(function(){
console.log('go to 2');
$('.container').animate({
scrollTop: $('.subcontainer.2').position().top + $('.container').scrollTop()
}, 500);
});
$('#3').click(function(){
console.log('go to 3');
$('.container').animate({
scrollTop: $('.subcontainer.3').position().top + $('.container').scrollTop()
}, 500);
});
});