I've managed to get the scroll working here: http://ift.tt/1x6C7s9
but on my website it fails to work properly. Any ideas why? It's essentially the same thing. Apologies since it's really long, I'm just not sure where exactly the problem is
html:
<body>
<div class='container'>
<nav class='sidebar'>
<ul>
<li class='main'>
<a href='#'>0</a>
</li>
<li class='subset' id='first-element'>
<a href='#'>1</a>
</li>
<li class='subset' id='second-element'>
<a href='#'>2</a>
</li>
<li class='subset' id='third-element'>
<a href='#'>3</a>
</li>
</ul>
</nav>
<div class='window-top' id='window-top'>
<div class='section' id='first'>1</div>
<div class='section' id='second'>2</div>
<div class='section' id='third'>3</div>
</div>
<div class='window'>
</div>
</div>
<script src='js/script.js'></script>
<script src='js/classie.js'></script>
<script src="http://ift.tt/1mWWrGH"></script>
</body>
JS:
$( document ).ready(function() {
$('#first-element').on('click', function(){
$('html, body').animate({
scrollTop: $('#third').offset().top
}, 500);
});
});
some relevant (?) css:
.window-top{
left:25%;
float:right;
width:75%;
background-image: url('../pic/bg.png');
height:80%;
}
.section
{
height:100%;
min-width:100%;
}
#second{
background-color:blue;
}
#third{
background-color:green;
}
Aucun commentaire:
Enregistrer un commentaire