Mam ogólnie w folderze ze stroną 3 pliki:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
<meta charset="utf-8">
<link rel='stylesheet' href='style.css'>
<link rel='stylesheet' href='css/fontello.css'>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script type="text/javascript" src="test.js">
</script>
</head>
<body>
<div class="mydiv" style="text-align:center; color:green">Gallery</div>
<div class="mydiv" style="background-color: #aaa">Page 1</div>
<div class="mydiv" style="background-color: #444">Page 2</div>
<div class="mydiv" style="background-color: blue">Page 3</div>
<div class="mydiv" style="background-color: #ccc">Page 4</div>
<div class="mydiv" style="background-color: yellow">Page 5</div>
</body>
</html>
style.css
html, body, body>div {
height:100%;
color:yellow;
}
test.js
$(document).ready(function () {
var divs = $('.mydiv');
var dir = 'up'; // wheel scroll direction
var div = 0; // current div
$(document.body).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
dir = 'down';
} else {
dir = 'up';
}
// find currently visible div :
div = -1;
divs.each(function(i){
if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
div = i;
}
});
if (dir == 'up' && div > 0) {
div--;
}
if (dir == 'down' && div < divs.length) {
div++;
}
//console.log(div, dir, divs.length);
$('html,body').stop().animate({
scrollTop: divs.eq(div).offset().top
}, 200);
return false;
});
$(window).resize(function () {
$('html,body').scrollTop(divs.eq(div).offset().top);
});
});
Czego mi brakuje? Co powinienem dodać/dopisać i gdzie?