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>