您的位置：首页 > 其它

一个经典的回到顶部效果，兼容各种浏览器

2011-10-10 10:48 197 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>回到顶部</title>

<script src="/js/library/jquery-1.4.1.min.js" type="text/javascript"></script>

</head>

<body>

<div style="height:1200px"></div>

<a href="#" style="position:fixed; right:0px; bottom:0px; z-index:100; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight -60));">

<img src="top.gif" border="0" id="returnTop" />

</a>

<script type="text/javascript">

//置顶效果

$(function () {

$("#returnTop").click(function () {

$(this).parent().hide();

document.documentElement.scrollTop = 0;

});

});

window.onscroll = function () {

if (document.documentElement.scrollTop > 10) {

$("#returnTop").parent().show();

} else {

$("#returnTop").parent().hide();

}

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航