Решил вчера написать это дело. Мне помогают , почему бы и мне не помочь.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: 100%;
line-height: 1.4;
}
body {
font-family: 'Roboto', Verdana, sans-serif;
color: #fff;
}
.way section {
display: block;
width: 100%;
height: 100vh;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.naver {
width: 100%;
position: fixed;
top: 10px;
left: 0;
}
.naver ul {
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: calc(50% - 65px);
list-style: none;
}
.naver ul li {
display: inline-block;
vertical-align: top;
}
.naver ul li a {
color: #fff;
border-radius: 5px;
background: #31b0d5;
border: 1px solid #269abc;
display: inline-block;
vertical-align: top;
padding: 4px 17px;
text-decoration: none;
text-transform: capitalize;
}
.disabled {
border-color: #C5C0C0 !important;
background: #C5C0C0 !important;
pointer-events: none;
text-decoration: none;
}
.way section:nth-child(1) {
background: #51AE51;
}
.way section:nth-child(2) {
background: #9999FA;
}
.way section:nth-child(3) {
background: #99FAD6;
}
.way section:nth-child(4) {
background: #C7FA99;
}
.way section:nth-child(5) {
background: #9AAA8B;
}
.way section:nth-child(6) {
background: #EA8383;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->
<script>
$(function () {
var sect = {
initialize: function () {
sect.listeners();
},
goTop: $('#arrow_top'),
goBot: $('#arrow_bot'),
way: $('.way'),
listeners: function () {
sect.goBot.on('click', sect.moveBottom);
sect.goTop.on('click', sect.moveTop);
},
moveBottom: function () {
var forTarget$ = $('.active').next().attr('id');
$(this).attr('href', '#' + forTarget$);
var target$ = $(this).attr('href');
$('html, body').animate({
scrollTop : $(target$).offset().top
}, 'slow');
sect.way.children('section'+target$+'')
.prev()
.removeClass('active')
.next()
.addClass('active');
if (!sect.way.children('section'+target$+'').is(':fir st-child')) {
sect.goTop.removeClass('disabled');
}
if (sect.way.children('section'+target$+'').is(':last-child')) {
sect.goBot.addClass('disabled');
}
return false;
},
moveTop: function () {
var forTarget$ = $('.active').prev().attr('id');
$(this).attr('href', '#' + forTarget$);
var target$ = $(this).attr('href');
$('html, body').animate({
scrollTop : $(target$).offset().top
}, 'slow');
sect.way.children('section'+target$+'')
.next()
.removeClass('active')
.prev()
.addClass('active');
if (!sect.way.children('section'+target$+'').is(':las t-child')) {
sect.goBot.removeClass('disabled');
}
if (sect.way.children('section'+target$+'').is(':firs t-child')) {
$(this).addClass('disabled');
}
return false;
}
}
sect.initialize();
});
</script>
</head>
<body>
<nav class="naver">
<ul>
<li><a href="#" class="disabled" id="arrow_top">top</a></li>
<li><a href="#" id="arrow_bot">bot</a></li>
</ul>
</nav>
<div class="way">
<section class="active" id="link_1">lorem1</section>
<section id="link_2">lorem2</section>
<section id="link_3">lorem3</section>
<section id="link_4">lorem4</section>
<section id="link_5">lorem5</section>
<section id="link_6">lorem6</section>
</div>
</body>
</html>
ух блин, спасибо тебе огромное! Вот выручил так выручил. :) зашился на работе, только думал вернуться к задаче, а тут ты помог. Сейчас как раз разберу решение. Еще раз - низкий поклон! :)