基于jquery的返回頂部效果(兼容IE6)
更新時間:2011年01月17日 17:22:16 作者:
最近在寫一個首頁返回頂部的效果,因為IE6不兼容position:fixed的原因,一直找不到好的解決辦法。在Google了一下,有了點眉目,加上一點自己的開發(fā),總算誤打誤撞的把問題解決了。
最近也在學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
復制代碼 代碼如下:
<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文件哦!
相關(guān)文章
擴展jquery實現(xiàn)客戶端表格的分頁、排序功能代碼
下面鏈接中是我用jQuery的擴展來實現(xiàn)的表格分頁和排序,使用這個擴展必須加上表頭<thead>和<tbody>標簽,因為我是 通過<tbody>來進行分頁的,要是不加thead,那么表頭也要作為分頁計算時的一個行了。2011-03-03用jQuery.ajaxSetup實現(xiàn)對請求和響應數(shù)據(jù)的過濾
本文主要對用jQuery.ajaxSetup實現(xiàn)對請求和響應數(shù)據(jù)的過濾的過程與方法進行詳細全面的實例講解。具有很好的參考價值,需要的朋友一起來看下吧2016-12-12Jquery實現(xiàn)的table最后一行添加樣式的代碼
有時間需要將表格的最后一行加上樣式,方便閱讀等需要,需要的朋友可以參考下。2010-05-05jQuery實現(xiàn)模擬flash頭像裁切上傳功能示例
這篇文章主要介紹了jQuery實現(xiàn)模擬flash頭像裁切上傳功能,結(jié)合實例形式分析了jQuery圖像剪切與文件傳輸相關(guān)操作技巧,需要的朋友可以參考下2016-12-12jquery.lazyload 實現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動條時加載,這是一個很不錯的用戶體驗。減少了頁面加載的時間了,也減輕了服務器的壓力,就查了下用JQuery..2010-02-02文本有關(guān)的樣式和jQuery求對象的高寬問題分別說明
有關(guān)文處理本有關(guān)的問題WEB開發(fā)經(jīng)常會用到,這里結(jié)合使用情況總結(jié)一下,同時還有jQuery求對象的高度問題,下面為大家本別講解下2013-08-08分享10篇優(yōu)秀的jQuery幻燈片制作教程及應用案例
jQuery 是一個非常優(yōu)秀的 JavaScript 框架,使用簡單靈活,同時還有許多成熟的插件可供選擇,它可以幫助你在項目中加入一些非常好的效果。2011-04-04