HTML_snap2hscroll ZZZ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>scroll test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.section').first();
$('a.display').on('click', function(e) {
e.preventDefault();
var t = $(this).text(),
that = $(this);
if (t === 'next' && $('.current').next('div.section').length > 0) {
var $next = $('.current').next('.section');
var top = $next.offset().top;
$('.current').removeClass('current');
$('body').animate({
scrollTop: top
}, function () {
$next.addClass('current');
});
} else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
var $prev = $('.current').prev('.section');
var top = $prev.offset().top;
$('.current').removeClass('current');
$('body').animate({
scrollTop: top
}, function () {
$prev.addClass('current');
});
}
});
});
</script>
<style type="text/css">
p{
    margin-left:40px;
}
.section {background-color:gray; height:440px; margin-bottom:20px; margin-left:80px}
.navigation {position:fixed; left:30px; top:20px;}

#c1 {background-color: #FF0000;}
#c2 {background-color: #0000FF;}
#c3 {background-color: #FFD700;}
#c4 {background-color: #308014;}
</style>
</head>
<body>
<div class="main">
<div class="navigation">
<a href="#" class="display">next</a><br>
<a href="#" class="display">prev</a>
</div>
<div id="c1" class="section current">
<p><br>One</p>
</div>
<div id="c2" class="section">
<p><br>Two</p>
</div>
<div id="c3" class="section">
<p><br>Three</p>
</div>
<div id="c4" class="section">
<p><br>Four</p>
</div>
</div>