<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>無標題文檔</title>
<style type="text/css">
* html{
background-image:url(about:blank);
background-attachment:fixed;
}/*解決IE6固定定位在平面滾動時閃爍*/
body,div{padding:0; margin:0; border:0;}
.con{ margin:0 auto; width:1000px; height:2000px; background-color:#F00;}
.home{ width:1000px; margin:0 auto;}
.btn{ position:fixed; margin-left:50%; top:500px; left:500px; width:50px; height:50px; background-color:#0FF;
<pre code_snippet_id="283988" snippet_file_name="blog_20140409_1_9537939" name="code" class="html">/*解決IE6不支持固定定位*/ _position:absolute;
_top: expression(eval(document.documentElement.scrollTop-200+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); _bottom:auto; display:none;}
</style>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {var timer=setInterval(goto,500);
//ie6不支持$(document).scroll方法，用定時器解決
function goto(){
if($(window).scrollTop()>200){
$(".btn").show();
}else{ $(".btn").hide(); } };
$(".btn").click(function(e) { $("html,body").animate({scrollTop:0},1000); });})
</script>
</head>
<body>
<div class="con"></div>
<div class="btn"></div>
<pre>
</pre>
</body>
</html>jquery編寫兼容IE6的返回頂部功能
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章