基于jquery的返回頂部效果(兼容IE6)
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則圖片緊貼在頂部滾動(dòng)*/
}
html{_text-overflow:ellipsis;} /*解決IE6下圖片抖動(dòng)*/
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文件哦!
- js+JQuery返回頂部功能如何實(shí)現(xiàn)
- 用jQuery實(shí)現(xiàn)的智能隱藏、滑動(dòng)效果的返回頂部代碼
- JQuery 動(dòng)畫卷頁 返回頂部 動(dòng)畫特效(兼容Chrome)
- 仿新浪微博返回頂部的jquery實(shí)現(xiàn)代碼
- jQuery中頁面返回頂部的方法總結(jié)
- jquery小火箭返回頂部代碼分享
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕
- 使用jQuery實(shí)現(xiàn)返回頂部
- jQuery實(shí)現(xiàn)小火箭返回頂部特效
相關(guān)文章
jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果實(shí)例
這篇文章主要介紹了jquery二級(jí)導(dǎo)航下拉菜單,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05擴(kuò)展jquery實(shí)現(xiàn)客戶端表格的分頁、排序功能代碼
下面鏈接中是我用jQuery的擴(kuò)展來實(shí)現(xiàn)的表格分頁和排序,使用這個(gè)擴(kuò)展必須加上表頭<thead>和<tbody>標(biāo)簽,因?yàn)槲沂?通過<tbody>來進(jìn)行分頁的,要是不加thead,那么表頭也要作為分頁計(jì)算時(shí)的一個(gè)行了。2011-03-03用jQuery.ajaxSetup實(shí)現(xiàn)對(duì)請(qǐng)求和響應(yīng)數(shù)據(jù)的過濾
本文主要對(duì)用jQuery.ajaxSetup實(shí)現(xiàn)對(duì)請(qǐng)求和響應(yīng)數(shù)據(jù)的過濾的過程與方法進(jìn)行詳細(xì)全面的實(shí)例講解。具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12Jquery實(shí)現(xiàn)的table最后一行添加樣式的代碼
有時(shí)間需要將表格的最后一行加上樣式,方便閱讀等需要,需要的朋友可以參考下。2010-05-05jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能,結(jié)合實(shí)例形式分析了jQuery圖像剪切與文件傳輸相關(guān)操作技巧,需要的朋友可以參考下2016-12-12jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動(dòng)條時(shí)加載,這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。減少了頁面加載的時(shí)間了,也減輕了服務(wù)器的壓力,就查了下用JQuery..2010-02-02文本有關(guān)的樣式和jQuery求對(duì)象的高寬問題分別說明
有關(guān)文處理本有關(guān)的問題WEB開發(fā)經(jīng)常會(huì)用到,這里結(jié)合使用情況總結(jié)一下,同時(shí)還有jQuery求對(duì)象的高度問題,下面為大家本別講解下2013-08-08分享10篇優(yōu)秀的jQuery幻燈片制作教程及應(yīng)用案例
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡(jiǎn)單靈活,同時(shí)還有許多成熟的插件可供選擇,它可以幫助你在項(xiàng)目中加入一些非常好的效果。2011-04-04