用HTML的錨點來定位有一定的侷限性，可能不是精確地定位到一個高度，而且似乎對於動態的節點的支持也不夠。那麼用JS去動態滾動頁面就很好地解決這些問題，能精確地定位到一個高度，而且用的是事件，可以保證點擊的有效性。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.aaaa{
width: 100%;
height:658px;
margin-bottom:30px;
border: 2px dashed #dc56c3;
background-color: #000;
}
#jshovernav{
position:fixed;
top:50px;
right:10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#jshovernav a").click(function(){
var idName = $(this).attr("id-name");
var scroll = $("#"+idName).offset().top-30;
console.log(scroll);
$(document).scrollTop(scroll);
});
});
</script>
</head>
<body>
<div id="hb_trend" class="aaaa">時裝</div>
<div id="hb_brand" class="aaaa">品牌</div>
<div id="hb_jewelry" class="aaaa">珠寶腕錶 配飾</div>
<div id="hb_beauty" class="aaaa">美容</div>
<div id="hb_star" class="aaaa">明星</div>
<div id="hb_life" class="aaaa">生活</div>
<div id="hb_gallery" class="aaaa">圖片庫</div>
<ul id="jshovernav" class="fixednavlist">
<li><a href="javascript:;" id-name="hb_trend">Trends</a><span>時裝</span></li>
<li><a href="javascript:;" id-name="hb_brand">Brands </a><span>品牌</span></li>
<li><a href="javascript:;" id-name="hb_jewelry">Accessory</a><span>珠寶腕錶 配飾</span></li>
<li><a href="javascript:;" id-name="hb_beauty">Beauty</a><span>美容</span></li>
<li><a href="javascript:;" id-name="hb_star">Stars</a><span>明星</span></li>
<li><a href="javascript:;" id-name="hb_life">LifeStyle</a><span>生活</span></li>
<li><a href="javascript:;" id-name="hb_gallery">Galary</a><span>圖片庫</span></li>
</ul>
</body>
</html>