基于jquery的返回頂部效果（兼容IE6）
更新時間：2011年01月17日 17:22:16 作者：
最近在寫一個首頁返回頂部的效果，因?yàn)镮E6不兼容position:fixed的原因，一直找不到好的解決辦法。在Google了一下，有了點(diǎn)眉目，加上一點(diǎn)自己的開發(fā)，總算誤打誤撞的把問題解決了。
最近也在學(xué)jquery，就順便記錄一下了。
HTML
<div class="scroll"></div>
<script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script>
<script type="text/javascript" src="../skins/css/top.js" charset="UTF-8"></script>
CSS
.scroll{
background:url(../image/scroll.gif) no-repeat center top transparent;
bottom:100px;
cursor:pointer;
height:67px;
width:18px;
position:fixed;
_position:absolute; /*兼容IE6*/
_top: expression(eval(document.documentElement.scrollTop)+700); /*700為圖片距離頂部的設(shè)定距離，可以修改。不加700則圖片緊貼在頂部滾動*/
}
html{_text-overflow:ellipsis;} /*解決IE6下圖片抖動*/
top.js
$(document).ready(function(){
var show_delay;
var scroll_left=parseInt((document.body.offsetWidth-960)/2)+961; //960為頁面寬度
$(".scroll").click(function (){
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
});
$(window).resize(function (){
scroll_left=parseInt((document.body.offsetWidth-960)/2)+961;
$(".scroll").css("left",scroll_left);
});
reshow(scroll_left,show_delay);
});
function reshow(marign_l,show_d) {
$(".scroll").css("left",marign_l);
if((document.documentElement.scrollTop+document.body.scrollTop)!=0)
{
$(".scroll").css("display","block");
}
else
{
$(".scroll").css("display","none");}
if(show_d) window.clearTimeout(show_d);
show_d=setTimeout("reshow()",500);
}
最后不要忘記了jQuery.js文件哦！
HTML
復(fù)制代碼 代碼如下:
<div class="scroll"></div>
<script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script>
<script type="text/javascript" src="../skins/css/top.js" charset="UTF-8"></script>
CSS
復(fù)制代碼 代碼如下:
.scroll{
background:url(../image/scroll.gif) no-repeat center top transparent;
bottom:100px;
cursor:pointer;
height:67px;
width:18px;
position:fixed;
_position:absolute; /*兼容IE6*/
_top: expression(eval(document.documentElement.scrollTop)+700); /*700為圖片距離頂部的設(shè)定距離，可以修改。不加700則圖片緊貼在頂部滾動*/
}
html{_text-overflow:ellipsis;} /*解決IE6下圖片抖動*/
top.js
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var show_delay;
var scroll_left=parseInt((document.body.offsetWidth-960)/2)+961; //960為頁面寬度
$(".scroll").click(function (){
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
});
$(window).resize(function (){
scroll_left=parseInt((document.body.offsetWidth-960)/2)+961;
$(".scroll").css("left",scroll_left);
});
reshow(scroll_left,show_delay);
});
function reshow(marign_l,show_d) {
$(".scroll").css("left",marign_l);
if((document.documentElement.scrollTop+document.body.scrollTop)!=0)
{
$(".scroll").css("display","block");
}
else
{
$(".scroll").css("display","none");}
if(show_d) window.clearTimeout(show_d);
show_d=setTimeout("reshow()",500);
}
最后不要忘記了jQuery.js文件哦！
相關(guān)文章
13個絢麗的Jquery 界面設(shè)計網(wǎng)站推薦
今天共享一些令人振奮的UI教程，這些UI大部分是基于Jquery的插件，主要包括動態(tài)切換視圖的相冊、3D旋轉(zhuǎn)分享按鈕、Facebook admin Panel，下滑效果的導(dǎo)航Menu，滑翔購物車功能，漂亮的Form表單元素等等。2010-09-09
不用錨點(diǎn)也可以平滑滾動到頁面的指定位置實(shí)現(xiàn)代碼
在不適用錨點(diǎn)的情況下也可以平滑滾動到頁面的指定位置，看樣子還不錯嗎，具體處理程序如下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
圖標(biāo)斜著移動到指定的位置如何實(shí)現(xiàn)，本文給予了詳細(xì)的解決方法，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
jQuery實(shí)現(xiàn)frame之間互通的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)frame之間互通的方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)frame父子框架之間的調(diào)用操作實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06
jquery實(shí)現(xiàn)紅色豎向多級向右展開的導(dǎo)航菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)紅色豎向多級向右展開的導(dǎo)航菜單效果,涉及jquery鼠標(biāo)hover事件結(jié)合class樣式動態(tài)添加與刪除的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實(shí)例詳解
這篇文章主要介紹了jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法,結(jié)合實(shí)例形式詳細(xì)分析了綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind的具體使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01
jquery的flexigrid無法顯示數(shù)據(jù)提示獲取到數(shù)據(jù)
升級了IE10，發(fā)現(xiàn)flexigrid無法顯示數(shù)據(jù)，提示獲取到了數(shù)據(jù)，但沒任何報錯任何顯示,經(jīng)過試驗(yàn)和跟蹤，修改如下，有類似問題的朋友可以參考下哈2013-07-07
jquery控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
基于JQuery的拖動插件有幾個都相當(dāng)好用，效果也很好，但再好，還是自己琢磨一個最好。所以，我的理念就是即使實(shí)際項(xiàng)目中使用別人的程序，自己也得根據(jù)自己的理解和想法寫一個出來。那么今天，就來看看我的思路是不是可以實(shí)現(xiàn)拖動排序的功能2013-10-10
詳解Jquery實(shí)現(xiàn)ready和bind事件
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)ready和bind事件的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-04