JS代碼：
<script type="text/javascript">
var urAgent = navigator.urAgent.toLowerCa();
var browr =
(browr = urAgent.match(/qqbrowr/([d.]+)/))?"qqbrowr/"+browr[1]:
(browr = urAgent.match(/s+2.x/))?"sogou/2.x": //sougou
(browr = urAgent.match(/msies+([d.]+)/))?"msie/"+browr[1]: //ie
(browr = urAgent.match(/chrome/([d.]+)/))?"chrome/"+browr[1]: //chrome
(browr = urAgent.match(/firefox/([d.]+)/))?"firefox/"+browr[1]: //firefox
(browr = urAgent.match(/version/([d.]+)s+safari/([d.]+)/))?"safari/"+browr[1]: //safari
(browr = urAgent.match(/opera/([d.]+)([wW]+)version/([d.]+)/))?"opera/"+browr[3]: //opera
"other browr";
var browr4 = browr.substr(0,2);
//實現回到頁面頂部
function goTopEx(){
var obj=document.getElementById("goTopBtn");
var obj2=document.getElementById("shangy");
var obj3=document.getElementById("xiay");
var obj4=document.getElementById("goBottom");
function getScrollTop(){
if(browr4=="ch"){
//谷歌瀏覽器
return document.body.scrollTop;
}el{
//IE、firefox等瀏覽器
return document.documentElement.scrollTop;
}
}
function tScrollTop(value){
if(browr4=="ch"){
//谷歌瀏覽器
document.body.scrollTop=value;
}el{
//IE、firefox等瀏覽器
document.documentElement.scrollTop=value;
}
}
window.onscroll=function(){getScrollTop()>50?obj.style.display="":obj.style.display="none";
getScrollTop()>100?obj2.style.display="":obj2.style.display="none";
document.body.clientHeight-getScrollTop()>650?obj3.style.display="":obj3.style.display="none";
document.body.clientHeight-getScrollTop()>650?obj4.style.display="":obj4.style.display="none";
}
obj.onclick=function(){
var goTop=tInterval(scrollMove,10);
function scrollMove(){
tScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}
function downn(){
if(browr4=="ch"){
//谷歌瀏覽器
window.scrollBy(0,document.body.clientHeight);
}el{
//IE、firefox等瀏覽器
window.scrollBy(0,document.documentElement.clientHeight);
}
}
</script>
CSS代碼：<style type="text/css">
#tbrowr a:link，.container a:visited{
font-size:18px;
text-decoration:none;
}
.container{
font-size:1.2em;
margin:auto;
font-family:"宋體";
width:75.29%;
line-height:1.6em;
}
P{
margin-top:16px;
margin-bottom:16px;
text-indent:2em;
}
.uls{
color:#CC6666;
font-weight:bold;
}
.uls>ol{
list-style:none;
font-weight:normal;
list-style:lower-latin;
color:#000000;
line-height:1.3em;
}
h2{
font-size:20px;
font-weight:bold;
margin-top:15px;
margin-bottom:0px;
text-indent:0em;
}
#goTopBtn, #goBottom, #shangy, #xiay{
width: 18px;
line-height: 1.2;
padding: 5px 0;
font-size: 12px;
text-align: center;
position: fixed;
right: 10px;
cursor: pointer;
filter: Alpha(opacity=30);
opacity=.3;
}
#goTopBtn, #goBottom {
background-color:#aaa;
color:#000;
}
#shangy, #xiay{
background-color: #ccc;
color: #000;
}
#goTopBtn{
bottom: 105px;
}
#goBottom {
bottom: 30px;
}
#shangy {
bottom: 80px;
}
#xiay {
bottom: 55px;
}
#goTopBtn:hover, #goBottom:hover, #shangy:hover, #xiay:hover{
background-color:#ddd;
border:#ccc 0px solid;
}
#goTopBtn a:link, #goBottom a:link, #xiay a:link, #shangy a:link {
text-decoration: none;
color:white;
}
img{
margin-right:2em;
text-indent:2em;
border:0;
}
.picsay{
color:#930;
font-size:90%;
line-height:110%;
margin-top:-12px;
padding:0;
}
.remark{
color:#930;
font-size:90%;
line-height:140%;
margin-top:-12px;
text-indent:0em;
padding:0;
}
.ref{
color:#930;
font-size:95%;
line-height:150%;
margin-top:-12px;
text-indent:2em;
padding:0;
}
.code0, .code2, .code4{
font-size:90%;
line-height:110%;
margin-top:-12px;
padding:0;
}
.code0{
color:red;
text-indent:0em;
}
.code2{
color:#930;
text-indent:2em;
}
.code4{
color:blue;
text-indent:4em;
}
sub,sup{
font-size:80%;
color:red;
}
</style>
HTML代碼：<body>
……
<div style="display:none" id="goTopBtn">
<a href="javascript:void(null)" target="_lf">∧</div>
<div style="display:none" id="shangy">
<a href="javascript:void(null)" onclick="shangy()" target="_lf">↑</a></div>
<div id="xiay">
<a href="javascript:void(null)" onclick="xiay()" target="_lf">↓</a></div>
<div id="goBottom">
<a href="javascript:void(null)" onclick="downn()" target="_lf">∨</a></div>
<SCRIPT type=text/javascript>
goTopEx();
function xiay(){
window.scrollBy(0,window.innerHeight);
}
function shangy(){
window.scrollBy(0,-window.innerHeight);
}
</script>
</body>
</body>
關鍵在于控制以下一些對象及屬性：
inner:測量的是一個窗口的活動文檔區（以稱為內容區）的高和寬；
outer:測量的是整個窗口的外邊界；包括任何顯示在窗口中的東西：滾動條、狀態欄等；
網頁可見區域寬： document.body.offtWidth (包括邊線的寬)
網頁可見區域高： document.body.offtHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offtWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offtHeight:獲取對象相對于版面或由父坐標 offtParent 屬性指定的父坐標的高度
offtLeft:獲取對象相對于版面或由 offtParent 屬性指定的父坐標的計算左側位置
offtTop:獲取對象相對于版面或由 offtTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offtX 相對容器的水平坐標
event.offtY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
－End－
本文發布于:2023-02-28 21:04:00，感謝您對本站的認可！
本文鏈接：http://www.newhan.cn/zhishi/a/167772152798037.html
版權聲明：本站內容均來自互聯網，僅供演示用，請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系，我們將在24小時內刪除。
本文word下載地址：回到頂部代碼(回到頂部代碼js).doc
本文 PDF 下載地址：回到頂部代碼(回到頂部代碼js).pdf
| 留言與評論（共有 0 條評論） |
