基于jquery的返回顶部效果(兼容IE6)_Javascript教程-查字典教程网
基于jquery的返回顶部效果(兼容IE6)
基于jquery的返回顶部效果(兼容IE6)
发布时间:2016-12-30 来源:查字典编辑
摘要:最近也在学jquery,就顺便记录一下了。HTML复制代码代码如下:CSS复制代码代码如下:.scroll{background:url(....

最近也在学jquery,就顺便记录一下了。

HTML

复制代码 代码如下:

<div></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为图片距离顶部的设定距离,可以修改。不加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文件哦!

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类