Skip to content

Instantly share code, notes, and snippets.

@nola

nola/scrollto percentage of page

Last active December 20, 2015 11:39
Show Gist options
  • Save nola/6124799 to your computer and use it in GitHub Desktop.
Save nola/6124799 to your computer and use it in GitHub Desktop.
Download ZIP
use tweenmax and the scrollto plugin to scroll to a percentage of the page
Raw
scrollto percentage of page
<!DOCTYPE html>
<html>
<head>
<title>ScrollTo Tester</title>
<style>
body{
margin: 0px;
overflow-x: hidden;
}
.nav{
position: fixed;
width: 100%;
height: 60px;
background-color: #ffffff;
opacity: 0.85;
}
.nav a{
font-family: sans-serif;
color: red;
position: relative;
margin: 20px;
top: 20px;
cursor: pointer;
}
.nav a:hover{
color: white;
background-color: red;
}
.content{
background: -webkit-linear-gradient(top, red 0%,blue 100%);
border-left: dotted 100px white;
width: 100%;
height: 3000px;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.4/plugins/ScrollToPlugin.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<script>
$( function(){
window.$window = $( window );
$( '.nav a' ).click( function(){
y = ( $(document).height() - $window.height()) * parseInt( $( this ).html()) / 100;
console.log( "scrollTo.y = ", y );
TweenMax.to( window, 1,
{
scrollTo: { y: y },
ease: Cubic.easeInOut,
autoKill: false
}
);
});
});
</script>
<div class="nav"><a>0%</a><a>10%</a><a>20%</a><a>30%</a><a>40%</a><a>50%</a><a>60%</a><a>70%</a><a>80%</a><a>90%</a><a>100%</a></div>
<div class="content"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment