マウスホイールでのページスクロールでURLにハッシュをつけたい

###前提・実現したいこと
マウスホイール上下で左右に1ページスクロールするサイトを制作中です。
こちらのデモと同じイメージでホイールでページが変わった際にURLにも現在の位置をハッシュでつけたいと考えています。
###発生している問題・エラーメッセージ
上記のサイトを参考にスクリプトを追加したのですがホイールで左右にスクロールしない状態になってしまいます。

###該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body{
    height: 100%;
}
section {
    height:100vh;
	width:100%;
	float:left;
}
#wrap,#page1,#page2,#page3{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	}
#page1{background-color:rgb(231, 76, 60);}
#page2{background-color:rgb(230, 126, 34);}
#page3{background-color:rgb(241, 196, 15);}
</style>
</head>
<body>
<div id="wrap">
<section id="page1"></section>
<section id="page2"></section>
<section id="page3"></section>
</div><!--/#wrap-->
<!--script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--横スクロール-->
<script type="text/javascript" src="js/jquery.horizonScroll.js"></script>
<script type="text/javascript">
$(function () {
	$('section').horizon();
});
</script>
<!--マウスホイール-->
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
$(function() {
	$('html').mousewheel(function(ev, mov) {
		if ($('html, body').is(':animated')) {
			return false;
		}
		var page = document.location.hash || '#page1';
		var target = null;
		if (mov > 0) {
			target = $(page).prev('.page').attr('id');
		} else if (mov < 0) {
			target = $(page).next('.page').attr('id');
		}
		if (target) {
			scrollTo('#'+target);
			document.location.hash = '#'+target;
		}
		ev.preventDefault();
    });
});
</script>
</body>
</html>