javaｓｃｒｉｐｔ实现博客页面右上角回到顶部按钮

很多博客博客在右下角的页面上有一个图标，不管屏幕张力如何，总是停留在右下角。点击顶部页面。然后考虑写一个演示来达到这个效果。

一个。图标固定在右下角。

1.ss提供了4的版面，固定代表绝对定位的元素。所以我们选择使用固定的固定的图标。





绝对的


生成绝对位置的元素相对于静态位置以外的第一个父位置定位。

元素的位置是由左的属性定义的。



固定的


生成绝对定位的元素相对于浏览器窗口定位。

元素的位置是由左的属性定义的。



相对


生成相对定位元件以定位其相对于其正常位置的位置。

因此，左：20在元素的左位置添加20个像素。



静态
默认值。没有位置，元素出现在正常流量（忽略的顶部，底部，左，右，或属性声明）。


继承
规定位置属性的值应该继承自父元素。





2。代码如下：按钮按钮总是放在屏幕的右下角，不管是拖动上下的精确条还是绘制浏览器窗口的大小。

复制代码代码如下所示：

# mytopbtn {

底部：5px；

右：5px；

位置：固定；

}



两。在点击实现后回到页面的上角。

1。回到屏幕的右上角，你几乎不知道如何移动的拉杆上down.javaｓｃｒｉｐｔ Javaｓｃｒｉｐｔ提供scrollby和滚动的方法。

复制代码代码如下所示：

window.scrollby（0，30） / /屏幕上移动30像素

window.scroll（0,0） /屏幕回到角落



2。已经提到如何移动拉杆，所以如何在一定的速度移动到页面的页面的顶部。然后setInterval和clearInterval方法使屏幕像素高达30的移动没有10毫秒。

复制代码代码如下所示：







顶部



U3000

复制代码代码如下所示：

Var myVar；

函数的TopFunc（）{

myVar = setInterval（eachscrollby，10）；

}

功能eachscrollby（eachheight）{

如果（文档。文档元素}。scrollTop <= 0）{

ClearInterval（myVar）；

其他{ }

window.scrollby（0 - 30）；

}

}



三。膨胀

顶部按钮。那么我们如何实现点击按钮屏幕底部。事实上，原理是相似的，它不在这里写演示。给你一些参考属性。

复制代码代码如下所示：

网页宽度是可见的：document.body.clientwidth

网页的高度：document.body.clientheight

页面的宽度是可见的：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.availheight

屏幕可用工作区宽度：window.screen.availwidth



以上就是本文的全部内容，希望能喜欢童鞋们的博客。