1. IT分享知识网首页

JS｜弹性返回顶部、底部，向下、向上翻页代码

老牧童 • • 未分类 • 阅读 26

JS｜弹性返回顶部、底部，向下、向上翻页代码><scripttype=”text/javascript”>。>//实现回到页面顶

大家好，欢迎来到IT知识分享网。

JS代码：

<script type=”text/javascript”>

var userAgent = navigator.userAgent.toLowerCase();

var browser =

(browser = userAgent.match(/browser\/([\d.]+)/))?”browser/”+browser[1]:

(browser = userAgent.match(/se\s+2.x/))?”sogou/2.x”: //sougou

(browser = userAgent.match(/msie\s+([\d.]+)/))?”msie/”+browser[1]: //ie

(browser = userAgent.match(/chrome\/([\d.]+)/))?”chrome/”+browser[1]: //chrome

(browser = userAgent.match(/firefox\/([\d.]+)/))?”firefox/”+browser[1]: //firefox

(browser = userAgent.match(/version\/([\d.]+)\s+safari\/([\d.]+)/))?”safari/”+browser[1]: //safari

(browser = userAgent.match(/opera\/([\d.]+)([\w\W]+)version\/([\d.]+)/))?”opera/”+browser[3]: //opera

“other browser”;

var browser4 = browser.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(browser4==”ch”){

//谷歌浏览器

return document.body.scrollTop;

}else{

//IE、firefox等浏览器

return document.documentElement.scrollTop;

}

}

function setScrollTop(value){

if(browser4==”ch”){

//谷歌浏览器

document.body.scrollTop=value;

}else{

//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=setInterval(scrollMove,10);

function scrollMove(){

setScrollTop(getScrollTop()/1.1);

if(getScrollTop()<1)clearInterval(goTop);

}

}

}

function downn(){

if(browser4==”ch”){

//谷歌浏览器

window.scrollBy(0,document.body.clientHeight);

}else{

//IE、firefox等浏览器

window.scrollBy(0,document.documentElement.clientHeight);

}

}

</script>

CSS代码：

<style type=”text/css”>

#tbrowser 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=”_self”>&and;</div>

<div style=”display:none” id=”shangy”>

<a href=”javascript:void(null)” onclick=”shangy()” target=”_self”>&uarr;</a></div>

<div id=”xiay”>

<a href=”javascript:void(null)” onclick=”xiay()” target=”_self”>&darr;</a></div>

<div id=”goBottom”>

<a href=”javascript:void(null)” onclick=”downn()” target=”_self”>&or;</a></div>

<SCRIPT type=text/javascript>

goTopEx();

function xiay(){

window.scrollBy(0,window.innerHeight);

}

function shangy(){

window.scrollBy(0,-window.innerHeight);

}

</script>

</body>

</body>

JS｜弹性返回顶部、底部，向下、向上翻页代码

关键在于控制以下一些对象及属性：

JS｜弹性返回顶部、底部，向下、向上翻页代码

inner:测量的是一个窗口的活动文档区（以称为内容区）的高和宽；

outer:测量的是整个窗口的外边界；包括任何显示在窗口中的东西：滚动条、状态栏等；

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： 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,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

－End－

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/46564.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信