手机苹果浏览器中css类名.btn点击默认页面回到顶部怎么解决

html-css012

手机苹果浏览器中css类名.btn点击默认页面回到顶部怎么解决,第1张

我觉得,如果css定义如果能抽象分层,或许可以解决这个问题。

任何问题(不限于css)的从上往下分解的话,上层都是面向语义,底层都是面向原子的属性或操作的。如果无法分层(想象一下如果程序的方法无法嵌套调用会怎样),就无法解决可读性和重用性这两个问题的矛盾。

<script type="text/javascript">

$(document).ready(function(){

//alert($("#goTopBtn").css("top"))

if($("#goTopBtn").css("top")=="180px"){

$("#goTopBtn").hide()

}

$(window).scroll(function(){//滚动时触发函数

if($("#goTopBtn").css("top")=="180px"){

//alert(111)

$("#goTopBtn").hide()

}else{

$("#goTopBtn").show()

}

$("#goTopBtn").css("top",$(document).scrollTop()+180)//将滚动条高度赋给悬浮框,如果你想改变位置,在300加值,自己修改吧。

})

})

</script>

<script>

function button1(){

button2(button3)

}

function button2(callback){

window.scrollTo(0,0)

callback()

}

function button3(){

$("#goTopBtn").hide()

// alert(22)

}

</script>

<style>

#goTopBtn {

POSITION: fixedTEXT-ALIGN: centermargin-right:50pxLINE-HEIGHT: 30pxWIDTH: 30pxbottom:90pxHEIGHT: 20pxFONT-SIZE: 12pxCURSOR: pointerRIGHT: 0px_position: absolute_right: auto

}

</style>

</head>

<body>

<div style="position: absolutez-index:90top:180px" id="goTopBtn" onclick="button1()"><img border=0 src="Top.gif"></div>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>内容<br/>

</body>

</html>

好事好了,就是那个点击两次置顶才可以隐藏