<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
// Esta función te mueve el scroll hasta llegar la id indicado
// Tiene que recibir el id
function goToId(idName)
{
if($("#"+idName).length)
{
var target_offset = $("#"+idName).offset();
var target_top = target_offset.top;
$('html,body').animate({scrollTop:target_top},{duration:"slow"});
}
}
$(document).ready(function(){
// Este evento se ejecuta cada vez que se pulsa una oción del menu
$("#menu li").click(function(){
// En el class del menu, se encuentra el nombre del id a donde
// desplazarnos
goToId($(this).attr('class'));
});
});
</script>
<style>
#menu {
list-style:none;
overflow:hidden;
padding:0px;
}
#menu li {
float:left;
position:relative;
width: 10em;
cursor:pointer;
background-color: #E0F574;
text-align:center;
border-right:1px solid #fff;
padding:10px 0;
}
div {
clear:both;
margin:20px 0px 500px 0px;
}
.right {float:right;cursor:pointer;}
</style>
</head>
<body>
<ul id="menu">
<li class="id1">opcion1</li>
<li class="id2">opcion2</li>
<li class="id3">opcion3</li>
<li class="id4">opcion4</li>
<li class="id5">opcion5</li>
</ul>
<div id="id1">
<div class="right" onclick="goToId('menu')">Subir</a></div>
contenido opcion 1
</div>
<div id="id2">
<div class="right" onclick="goToId('menu')">Subir</a></div>
contenido opcion 2
</div>
<div id="id3">
<div class="right" onclick="goToId('menu')">Subir</a></div>
contenido opcion 3
</div>
<div id="id4">
<div class="right" onclick="goToId('menu')">Subir</a></div>
contenido opcion 4
</div>
<div id="id5">
<div class="right" onclick="goToId('menu')">Subir</a></div>
contenido opcion 5
</div>
</body>
</html>