<style>
.menu{
position:fixed;
left:0;
width:900px;
left:50%;
top:0;
margin-left:-450px;
border-bottom:3px solid #aaa;
height: 71px;
}
ul{
list-style:none;
}
li {
cursor:pointer;
list-style: none;
float: left;
font: 14px arial;
padding: 19px 30px 20px 30px;
}
li:hover{
border-bottom:3px solid #ffc944;
}
.box{
width:100%;
height:500px;
background:#ccc;
margin-top:150px;
}
#1{
background:#ccc;
}
#2{
background:#aaa;
}
#3{
background:#efefef;
}
.red{
border-bottom:3px solid red !important;
}
</style>
<div class="menu"><ul><li value="1">FIRST</li><li value="2">SECOND</li><li value="3">THIRD</li></ul></div>
<div class="box" id="1"></div>
<div class="box" id="2"></div>
<div class="box" id="3"></div>
<script>
$(".menu li").click(function(){
$(".menu li").removeClass("red");
$(this).addClass("red");
var val="#" + $(this).val();
$("body").animate({scrollTop:$(val).offset().top},300);
});
</script>