aligator28/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>Scroll</title>
</head>
<body>
	<div class="pages _1page" data-id="1">
		<img src="https://unsplash.it/800/600/?random" alt="fashion">
	</div>
	<div class="pages _2page" data-id="2">
		<img src="https://unsplash.it/800/400/?random" alt="fashion">
	</div>
	<div class="pages _3page" data-id="3">
		<img src="https://unsplash.it/600/600/?random" alt="fashion">
	</div>
	<div class="pages _3page" data-id="4">
		<img src="https://unsplash.it/400/600/?random" alt="fashion">
	</div>
	<div class="pages _3page" data-id="5">
		<img src="https://unsplash.it/800/300/?random" alt="fashion">
	</div>

	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

## js.js
  var keyDown = 40;
  var keyUp = 38;

document.onkeydown = function(event) {
  var currKey = detectKeyCode(event);

  if (currKey == keyDown || currKey == keyUp) { // do this script only when pressing up or down buttons
    var currPage = detectCurrentPage();
    showNextPage(currPage, event);
  }

};


function showNextPage(currPage, event) {

  var nextPage = 1;
  var currKey = detectKeyCode(event);

  if (currKey == keyDown) {
    nextPage = parseInt(currPage) + 1;
  }

  if (currKey == keyUp) {
    if (currPage == 1) {
      nextPage = 1;
    }
    else {
      nextPage = parseInt(currPage) - 1;
    }
  }
  changePagesVisibility(currPage, nextPage);
  console.log(nextPage);
}

function changePagesVisibility(currPage, nextPage) {
  if ( $('.pages').size() == nextPage - 1 ) { //do not allow to scroll more than last web page (не позволяем переходить на несуществующие страницы, большие чем их есть)
    return false; //if we want to stop scrolling pages at all
    nextPage = 1; //if we want to start from first page
  }
  $('body').find('[data-id="' + currPage + '"]').slideUp('slow');
  $('body').find('[data-id="' + nextPage + '"]').slideDown('slow');
}

function detectCurrentPage() {

  var page = '';
  $('.pages').each(function(index, element) {

    if ($(this).css('display') == 'block') {
      page = $(this).attr('data-id');
    }
  });

  return page;
}

function detectKeyCode(event) {

  var keycode;
  if(!event) var event = window.event;
  if (event.keyCode) keycode = event.keyCode; // IE
  else if(event.which) keycode = event.which; // all browsers

  return keycode;
}

## style.css
html, body {
	height: 100%;
	margin: 0;
}

.pages {
	height: 100%;
	width: 100%;
	position: absolute;
	display: none;
}
.pages img {
	display: block;
	margin: 3% auto;
}
div[data-id="1"] {
	display: block;
	background-color: #AB4848;
}
div[data-id="2"] {
	background-color: #53508E;
}
div[data-id="3"] {
	background-color: #569350;
}
div[data-id="4"] {
	background-color: #509392;
}
div[data-id="5"] {
	background-color: #938A50;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>Scroll</title>
	</head>
	<body>
	<div class="pages _1page" data-id="1">
	<img src="https://unsplash.it/800/600/?random" alt="fashion">
	</div>
	<div class="pages _2page" data-id="2">
	<img src="https://unsplash.it/800/400/?random" alt="fashion">
	</div>
	<div class="pages _3page" data-id="3">
	<img src="https://unsplash.it/600/600/?random" alt="fashion">
	</div>
	<div class="pages _3page" data-id="4">
	<img src="https://unsplash.it/400/600/?random" alt="fashion">
	</div>
	<div class="pages _3page" data-id="5">
	<img src="https://unsplash.it/800/300/?random" alt="fashion">
	</div>

	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="js/custom.js"></script>
	</body>
	</html>
	var keyDown = 40;
	var keyUp = 38;

	document.onkeydown = function(event) {
	var currKey = detectKeyCode(event);

	if (currKey == keyDown \|\| currKey == keyUp) { // do this script only when pressing up or down buttons
	var currPage = detectCurrentPage();
	showNextPage(currPage, event);
	}

	};


	function showNextPage(currPage, event) {

	var nextPage = 1;
	var currKey = detectKeyCode(event);

	if (currKey == keyDown) {
	nextPage = parseInt(currPage) + 1;
	}

	if (currKey == keyUp) {
	if (currPage == 1) {
	nextPage = 1;
	}
	else {
	nextPage = parseInt(currPage) - 1;
	}
	}
	changePagesVisibility(currPage, nextPage);
	console.log(nextPage);
	}

	function changePagesVisibility(currPage, nextPage) {
	if ( $('.pages').size() == nextPage - 1 ) { //do not allow to scroll more than last web page (не позволяем переходить на несуществующие страницы, большие чем их есть)
	return false; //if we want to stop scrolling pages at all
	nextPage = 1; //if we want to start from first page
	}
	$('body').find('[data-id="' + currPage + '"]').slideUp('slow');
	$('body').find('[data-id="' + nextPage + '"]').slideDown('slow');
	}

	function detectCurrentPage() {

	var page = '';
	$('.pages').each(function(index, element) {

	if ($(this).css('display') == 'block') {
	page = $(this).attr('data-id');
	}
	});

	return page;
	}

	function detectKeyCode(event) {

	var keycode;
	if(!event) var event = window.event;
	if (event.keyCode) keycode = event.keyCode; // IE
	else if(event.which) keycode = event.which; // all browsers

	return keycode;
	}
	html, body {
	height: 100%;
	margin: 0;
	}

	.pages {
	height: 100%;
	width: 100%;
	position: absolute;
	display: none;
	}
	.pages img {
	display: block;
	margin: 3% auto;
	}
	div[data-id="1"] {
	display: block;
	background-color: #AB4848;
	}
	div[data-id="2"] {
	background-color: #53508E;
	}
	div[data-id="3"] {
	background-color: #569350;
	}
	div[data-id="4"] {
	background-color: #509392;
	}
	div[data-id="5"] {
	background-color: #938A50;
	}