html css 返回顶部按钮位置怎么固定？

html-css018

html css 返回顶部按钮位置怎么固定？,第1张

可以使用相当于浏览器定位。css样式中写入：\x0d\x0a{position: fixed\x0d\x0a right: 20px\x0d\x0a bottom: 100px}相当于浏览器右边20px，浏览器底部100px的距离的定位。\x0d\x0afixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

① 可以给那个按钮设置固定的宽高度width和height，之后设置它的margin：45% 45%；这样，基本上可以水平垂直都居中，而且是随着窗口调整都是这样的居中效果；

<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>

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