js实现漂浮回顶部按钮实例

2024-05-06 16:19:27

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了js实现漂浮回顶部按钮的方法,实例分析了javascript实现返回顶部功能的样式与动态实现技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现漂浮回顶部按钮的方法。分享给大家供大家参考。具体实现方法如下：

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>漂浮回顶部按钮</title>

<style>

body{

height:2000px;

}

.rTop{

width:100px; height:25px;

text-align:center; font-size:small;

line-height:25px; border:1px solid #999;

position:fixed; right:0; bottom:0;

border-bottom-color:#333;

border-right-color:#333; margin:5px;

cursor:pointer; display:none

}

</style>

<script>



window.onscroll=function(){

if(document.body.scrollTop||document.documentElement.scrollTop>0){

document.getElementById('rTop').style.display="block"

}else{

document.getElementById('rTop').style.display="none"

}

}



function toTop(){

window.scrollTo('0','0');

document.getElementById('rTop').style.display="none"

}

</script>

</head>

<body>

<div class="rTop" id="rTop" onClick="toTop()">返回顶部</div>

<h1>顶部</h1>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>测试</h1><p></p><h1>测试</h1><p></p><h1>测试</h1><p></p>

<h1>底部</h1>

</body>

</html>