go-top

利用jqu 沒有做不到事情 不信來看看  現(xiàn)在商城五花八門 購物模式缺啥一成不變 那么 我們就來比比誰的用戶體驗好 對吧

誰為用戶想的周到 誰就是大哥大?。?！

上篇文章說道給小站加個返回頂部的按鈕，很簡單很實用很友好。一句html插入代碼、一句CSS美化代碼、一句jQuery滑動代碼，輕松搞定！這篇文章接著來說，相關(guān)代碼上篇文章也已補充，今兒就主要來說說代碼的含義。

既然用了，順便了解學(xué)習(xí)下它的含義，那是不學(xué)白不學(xué)的事兒呀！先看效果圖，最好是親自點擊體驗：

圖中左手邊三個圖標(biāo)，功能分別是滑動到頂部、到評論、到底部。具體代碼：

<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>// 一個div標(biāo)簽包裹著三個空div標(biāo)簽而已，只為插入顯示內(nèi)容，可放header.php內(nèi)

#shangxia{position:fixed;top:40%;left:50%;margin-left:-520px;display:block;}/* 使用fixed使id=“shangxia”的對象固定于瀏覽器中，相對的上距離為40%，左距離為50%（即居中），然后向左移動520px（需自行調(diào)整?。。。?*/#shang{background:url(images/shang.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}#xia{background:url(images/xia.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}#comt{background:url(images/comt.gif) no-repeat;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}

$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //點擊id="shang"對象時，滑動至相對瀏覽器滾動條為0px（即頂部），時間為800毫秒$('#comt').click(function(){$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);});//點擊id="comt"對象時，滑動至id="comment"相對瀏覽器滾動條的距離，時間為800毫秒$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});