![Uploading 右側(cè)導航定位_529625.gif . . .]
代碼實現(xiàn)如下
1、html部分實現(xiàn)
<div class="content">
<h1>右側(cè)導航測試</h1>
<div id="tag-header">
<div class="article-item">
<div class="article-title floatl">
<a>頭部</a>
</div>
<div class="floatl article-content">
<a class="floatl">
<img src="../images/haha.png" height="262" width="426"/> </a>
<p class="floatl">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p>
</div>
<div class="floatl article-content">
<a class="floatl">
<img src="../images/haha.png" height="262" width="426"/> </a>
<p class="floatl">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p>
</div>
<div class="floatl article-content">
<a class="floatl">
<img src="../images/haha.png" height="262" width="426"/> </a>
<p class="floatl">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <p class="floatl">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <p class="floatl">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <p class="floatl">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <p class="floatl">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> </div>
</div>
<div id="tag-content">
<div class="article-item">
<div class="article-title floatl">
<a>內(nèi)容部分</a>
</div>
<div class="floatl article-content">
<a class="floatl">
<img src="../images/haha.png" height="262" width="426"/> </a>
<a class="floatl">
<img src="../images/haha.png" height="262" width="426"/> </a>
<a class="floatl">
<img src="../images/haha.png" height="262" width="426"/> </a>
<a class="floatl">
<img src="../images/haha.png" height="262" width="426"/> </a> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> </div> <div class="floatl article-content"> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> <a class="floatl"> <img src="../images/haha.png" height="262" width="426"/> </a> </div> </div> </div> <div id="tag-footer"> <div class="article-item"> <div class="article-title floatl"> <a>我是底部</a> </div> <div class="floatl article-content-noImg"> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> <div class="floatl article-content-noImg"> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> <div class="floatl article-content-noImg"> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> <p class="floatl lineP">可就是發(fā)動機的快速方便都是好離開家還是貸款機構(gòu)你，收到了廣泛的時間發(fā)布，數(shù)據(jù)庫的股份及湖北省那幾乎是空白地方結(jié)不結(jié)婚vsdbfjvbjh</p> </div> </div>
</div>
<div class="nav-menu">
<a id="menu-header" class="hover">Header</a>
<a id="menu-content" class="hover">Content</a>
<a id="menu-footer" class="hover">Footer</a>
<div id="gotoTop" class="hover">TOP</div>
</div>
</div>
2、css部分頁面實現(xiàn)
<style>
.content { padding: 30px 20px; }
h1 { font-size: 18px; text-align: center; }
.article-title { width: 100%; }
.article-title a { font-size: 16px; }
.article-item { padding: 10px; height: auto; }
.article-item:after { content: ""; display: block; clear: both; }
.article-content { padding: 10px 0; border-bottom: 1px #333 solid; }
.article-content a { height: 100%; width: 20%; }
.article-content img { width: 100%; height: auto; }
.article-content p { padding-left: 10px; width: 80%; word-break: break-all; text-align: left; }
p, img { display: block; }
.article-content-noImg { width: 100%; padding: 10px 0; border-bottom: 1px #333 solid; }
/*默認樣式，主要是position:fixed實現(xiàn)屏幕絕對定位*/
#menu-header, #menu-content, #menu-footer, #gotoTop { position: fixed; /*bottom: 20px;*/ right: 20px; padding: 20px 4px; width: 60px; text-align: center; border: 1px solid #e0e0e0; background: orangered; color: #fff; }
#menu-header { bottom: 200px; }
#menu-content { bottom: 140px; }
#menu-footer { bottom: 80px; }
#gotoTop { bottom: 20px; }
/*用CSS表達式(expression)來實現(xiàn)ie6下position:fixed效果*/ #menu-header, #menu-content, #menu-footer, #gotoTop { _position: absolute; _top: expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px") }
/*鼠標進入的反饋效果*/
#gotoTop:hover, #menu-header:hover, #menu-content:hover, #menu-footer:hover { background: #5CB542; text-decoration: none; }
</style>
3、JQuery部分實現(xiàn)
<script>
$(function () {
menuFunction.init();
});
var menuFunction = {
init: function() {
$("#gotoTop").click(function () {
var speed = 200;//滑動的速度
$('body,html').animate({scrollTop: 0}, speed);
return false;
});
$(document).ready(function(e) {
$(".nav-menu a").click(function() {
//取當前點擊對象id
var id = $(this).attr("id");
var type = id.split('-');
//取點擊字母所對應(yīng)的品牌名稱標記位置ID
var tgid = 'tag-' + type[1];
// 取字母標記位置top值 + 當前dl滾動條的top值 = 當前需要的top值 var tgtop = $("#" + tgid).position().top;
// + $(".content").scrollTop();
//這里利用jq animate動畫給scrolltop 添加一個動畫效果，瞬間高大上 $("body").animate({
scrollTop:tgtop
}, 500);
});
});
}
}
</script>
