####主要思想
对应楼层距离页面顶部的距离与页面滚动的距离相对应
####jquery相关知识
$(obj).click(function(){ …… }) 点击事件
index() 获取元素对象在同辈元素中的索引值
offset() 获取元素对象距离页面的边距
position() 如果父元素有定位,距离父级元素的边距。若父元素没有定位,距离页面的边距
animate({要变化的样式(只能是变化的值)},执行的时间,执行的效果(线性等),动画执行完执行的函数)
####html实现代码
<div class="box">
<div class="floor">
<h3>家用电器</h3>
</div>
<div class="floor">
<h3>手机、运营商、数码</h3>
</div>
<div class="floor">
<h3>电脑、办公</h3>
</div>
<div class="floor">
<h3>家居、家具、家装、厨具</h3>
</div>
<div class="floor">
<h3>男装、女装、童装、内衣</h3>
</div>
<ul class="menu">
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
</ul>
</div>
####css样式代码
.box { width: 1000px; margin: 0 auto; }
.floor { height: 500px; background: #ddd; }
ul { list-style: none; position: fixed; top: 100px; left: 0;}
ul li { width: 50px; height: 50px;line-height: 50px; text-align: center; background: #ddd;border: 1px solid red;}
####jquery代码实现
$(function(){
$('.menu>li').click(function(){ //当点击li标签时
var index = $(this).index();//获取当前对象在同辈兄弟中的索引值
vat top = $('.floor').eq(index).offset().top;//获取li对应的楼层距离页面上边距
$('html,body').animate({//设置动画
scrollTop : top
},500); //500毫秒让页面滚动到相应位置
})
})