Skip to content

Instantly share code, notes, and snippets.

@reynish

reynish/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:08
Show Gist options
  • Save reynish/39aea386e28aa44c623f to your computer and use it in GitHub Desktop.
Save reynish/39aea386e28aa44c623f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

This example uses a custom tween that interpolates the window’s vertical scroll offset.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
padding: 40px;
}
h1, h2 {
font-family: "Helvetica Neue";
padding-bottom: 120px;
}
h2 {
padding-bottom: 240px;
}
</style>
<div id="ElementToScroll">
<h1>Smooth scrolling!</h1>
<h2>Get ready to scroll, in 3, 2, 1…</h2>
<h1>Whee!</h1>
<h1>Whee!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!!!!!!!!!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!!!!!!!!!!!!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!!!!</h1>
<h1>Whee!!!</h1>
<h1>Whee!!</h1>
<h2>All done!</h2>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
console.log(document.body.getBoundingClientRect().height)
console.log(window.innerHeight)
console.log(document.body.getBoundingClientRect().height - window.innerHeight)
d3.transition()
.delay(1500)
.duration(7500)
.tween("scroll", scrollTween(document.body.getBoundingClientRect().height - window.innerHeight));
function scrollTween(offset) {
return function() {
var i = d3.interpolateNumber(window.pageYOffset || document.documentElement.scrollTop, offset);
return function(t) { scrollTo(0, i(t)); };
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment