<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.floor{width: 1000px;height: 500px;font:50px/500px "";text-align: center;}
.box1{background: #f00;}
.box2{background: #f0f;}
.box3{background: #ff0;}
.box4{background: #00f;}
.list{width: 100px;margin: 0;padding: 0;background: #ccc;position: fixed;right: 0;top:200px;}
.list li{list-style: none;height: 40px;line-height: 40px;text-align: center;border-bottom: solid 1px #fff;cursor: pointer;}
</style>
</head>
<body>
<div class="floor box1">男裝</div>
<div class="floor box2">褲子</div>
<div class="floor box3">電腦</div>
<div class="floor box4">手機</div>
<ul class="list">
<li>男裝</li>
<li>褲子</li>
<li>電腦</li>
<li>手機</li>
</ul>
</body>
<script src="../jquery.js"></script>
<script>
$(".list").children("li").click(function(){
// $(".floor").eq($(this).index()).offset().top
// $(document).scrollTop($(".floor").eq($(this).index()).offset().top);
// document沒有animate方法
// 要向做動畫
// 根元素要使用具體的標籤
$("html").animate({
scrollTop:$(".floor").eq($(this).index()).offset().top
})
})
</script>
</html>
實現簡單樓層錨點效果 記得要插入jquery哦