vendetta_klein,
прокрутка блоков колёсиком мыши, плюс добавлено: индикация текущего блока в меню
<!DOCTYPE html>
<html>
<head>
<base href="http://212.98.173.96:8282/" />
<meta charset="UTF-8">
<title>Мой сайт</title>
<link href="style.css" rel="stylesheet">
<style type="text/css">
.menu.open{
left:0px;
}
.menu{
top: 30%;
transition: left 250ms;
}
.menu li.active{
background-image: -webkit-gradient(linear, left, right, color-stop(0, #DCDCDC), color-stop(1, #E58643));
background-image: -o-linear-gradient(left, #DCDCDC, #E58643);
background-image: -moz-linear-gradient(left, #DCDCDC, #E58643);
background-image: -webkit-linear-gradient(left, #DCDCDC, #E58643);
background-image: linear-gradient(to right, #DCDCDC, #E58643)
}
.menu li.active a{
color: #000000;
font-weight: bold;
}
.menu li:after{ transition: all 800ms 300ms;
content: " ";
display: block;
position: absolute;
height: 8px;
width: 8px;
right: -25px;
margin-top: -25px;
background-color: #9E009E ;
border-radius: 50%;
}
.menu li.active:after {
background-color: #FFE033;
}
.menu.open li:after{
transition-duration: 0s;
transition-delay: 0s;
height: 0;
width: 0;
}
</style>
<script src="js/jquery-3.1.0.min.js"></script>
<script>
$(function() {
$(".menu-icon").click(function() {
$(".menu").toggleClass("open")
});
var c = $('a[href^="#"]'),
a = 0,
e = c.length,
d;
c.click(function(b) {
b.preventDefault();
a = c.index(this);
c.parent().removeClass("active").eq(a).addClass("active");
b = $(this).attr("href");
$("html, body").animate({
scrollTop: $(b).offset().top
}, 800, function() {
d = !1
})
});
$("body").on("wheel", function(b) {
b.preventDefault();
d || (d = !0, 0 < b.originalEvent.deltaY ? a++ : a--, 0 > a && (a = 0), a >= e && (a = e - 1), c.eq(a).click())
})
});
</script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="gallery"></div>
<div id="blog"></div>
<div id="about"></div>
<div id="contact"></div>
<div id="help"></div>
<div class="menu-icon">
<img src="img/MENU_ICON.png">
<p>menu</p>
</div>
<div class="menu">
<ul>
<li class="active"><a href="#gallery">gallery</a></li>
<li><a href="#blog">blog</a></li>
<li><a href="#about">about me</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#help">help</a></li>
</ul>
</div>
</body>
</html>
