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，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/zhishi/a/167772152798037.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：回到顶部代码(回到顶部代码js).doc
本文 PDF 下载地址：回到顶部代码(回到顶部代码js).pdf
| 留言与评论（共有 0 条评论） |
