Skip to content

Instantly share code, notes, and snippets.

Last active Dec 16, 2015
What would you like to do?
transition scrollTop on a DIV
<!doctype html>
<script src=""></script>
body { font-family: sans-serif; font-size: .8em; background-color: #ccc; }
#scrollable { height: 100px; overflow: hidden; border: solid 1px white;}
#scrollable .inner { height: 1000px; }
#scrollable .content {
height: 94px; margin: 2px 0;
background-color: steelblue;
color: white;
<div id="scrollable">
<button id="down">scroll down</button>
<script> for(var i=0; i < 10; i++) document.write("<div class='content'>"+i+"</div>"); </script>
<button id="up">scroll up</button> <span>inspired by mbostock's <a href="">Smooth Scrolling gist</a></span>
var scrollable ="#scrollable");"#down").on('click', function() {
var scrollheight ="scrollHeight");"#scrollable").transition().duration(3000)
.tween("uniquetweenname", scrollTopTween(scrollheight));
});"#up").on('click', function() {"#scrollable").transition().duration(1000)
.tween("uniquetweenname", scrollTopTween(0));
function scrollTopTween(scrollTop) {
return function() {
var i = d3.interpolateNumber(this.scrollTop, scrollTop);
return function(t) { this.scrollTop = i(t); };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment