[ This slider is only for IE, I tested on IE 8 version only, but that's enough for me. ]
!important: I can't hide a scroll and use simple animation [ it will not work in phones, I already tested. ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tempScrollTop,currentScrollTop = 0;
var way = "default";
// array of the anchors
var jak = new Array("jak1","jak2","jak3","jak4");
i = 0;
// scroll to id
function goToByScroll(id)
{
$('html,body').animate({scrollTop: $("#"+id).offset().top},"fast");
}
$(window).scroll(function()
{
currentScrollTop = $(window).scrollTop();
if (tempScrollTop < currentScrollTop)
{
way= "down";
i++;
}
else if (tempScrollTop > currentScrollTop)
{
way= "up";
i--;
}
tempScrollTop = currentScrollTop;
if (i<0) { ++i; }
if (i>=4){ --i; }
// so, we go the current anchor
goToByScroll(jak[i]);
});
});
</script>
</head>
<body>
<style>
html,body { width: 100%; height: 100%;}
div { margin: 0 auto; border: 1px solid; width: 500px; height: 100%; text-align: center; }
</style>
<div id="jak1">1</div>
<div id="jak2">2</div>
<div id="jak3">3</div>
<div id="jak4">4</div>
</body>
</html>This is how I imagine a situation, but the slider works very weird.
Hope on some help or an advises. Thanks.
Answered
