当前位置:网站首页 >> 时尚

javascript實現博客園頁面右下角

时间:2019-11-09 08:26:20 来源:互联网 阅读:0次

javascript实现博客园页面右下角返回顶部按钮

2.定代码如下Button按钮将始终置于屏幕右下角不论是拖动上下精度条还是拉伸浏览器窗口大小.

复制代码 代码如下:

#myTopBtn{

bottom: 5px;

right: 5px;

position:fixed;

}

二. 实现点击后回到页面上角.

1. 要想回到屏幕上角就得小了解如何通过JavaScript还操作拖动条的上下移动.JavaScript提供了scrollby和scroll方法.

复制代码 代码如下:

rollBy(0,-30) //屏幕上移30像素点

roll(0,0) // 屏幕回到上角

2. 上面已经提到了如何移动拖动条,那么如何实现按照一定的速度移动到page页顶部呢那么就要借助setInterval和clearInterval方法. 实现没10毫秒屏幕上移30个像素点

复制代码 代码如下:

body

div id="myDiv"

/div

button id="myTopBtn" To Top /button

/body

复制代码 代码如下:

var myVar;

function TopFunc(){

myVar=setInterval(EachScrollBy,10);

}

function EachScrollBy(eachHeight){

if(rollTop =0){

clearInterval(myVar);

}else{

rollBy(0,-30);

}

}

三. 扩展

实现了置顶按钮那么我们如何实现点击按钮屏幕置底呢.其实原理差不多,这里就不写demo了给大家提供一些属性做参考.

复制代码 代码如下:

页可见区域宽:ientWidth

页可见区域高:ientHeight

页可见区域宽:fsetWidth (包括边线的宽)

页可见区域高:fsetHeight (包括边线的宽)

页正文全文宽:rollWidth

页正文全文高:rollHeight

页被卷去的高:rollTop

页被卷去的左:rollLeft

页正文部分上:reenTop

页正文部分左:reenLeft

屏幕分辨率的高:ight

屏幕分辨率的宽:dth

屏幕可用工作区高度:ailHeight

屏幕可用工作区宽度:ailWidth

以上就是本文的全部内容了,希望爱玩博客的童鞋们喜欢

慢性心律失常表现
生物谷药业
儿童呼吸道感染用药

相关文章

一周热门

热点排行

热门精选

友情链接:
媒体合作:

Copyright (c) 2011 八零CMS 版权所有 备案号:苏ICP备17012668号-3

网站地图