Skip to content

Instantly share code, notes, and snippets.

@abhidilliwal

abhidilliwal/jsbin.OhuQuVaQ.css

Created January 16, 2014 16:55
Show Gist options
  • Save abhidilliwal/8458638 to your computer and use it in GitHub Desktop.
Save abhidilliwal/8458638 to your computer and use it in GitHub Desktop.
Download ZIP
just like scrollIntoView but with animation: http://jsbin.com/OhuQuVaQ/3/edit
Raw
jsbin.OhuQuVaQ.css
#container{
border: 1px solid green;
height: 300px;
overflow: auto;
padding: 20px;
}
.block{
background-color: green;
height: 50px;
margin-bottom: 2px;
}
.red{
background-color: red;
padding: 20px;
margin: 20px;
}
.spacer{
height: 900px;
}
Raw
jsbin.OhuQuVaQ.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Scrolling with animation using jQuery" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="spacer"></div>
<div id=container>
<div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div>
<div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div>
<div id="alag" class="block red">different</div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div>
</div>
<button id="btn">Do Something</button>
</body>
</html>
Raw
jsbin.OhuQuVaQ.js
$(function(){
$c = $("#container"),
$btn = $("#btn"),
$alag = $("#alag");
$btn.on("click", function () {
$c.animate({
scrollTop: $c.scrollTop() + ($alag.offset().top - $c.offset().top)
}, 150);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment