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

博客园右下角返回顶部按钮实现原理

许多博客园博主的博客页面右下角都有一个图标，无论屏幕如何拉伸，该图标始终固定在右下角位置。点击该图标后，页面会自动滚动至顶部。受此启发，这里编写一个示例Demo来实现这一效果。

图标右下角固定

一、图标固定在右下角

CSS中提供了4种布局方式，其中fixed表示绝对定位元素。因此，我们选择使用fixed属性来实现图标的固定定位。

定义相关CSS代码后，按钮将始终位于屏幕右下角，无论是拖动滚动条还是拉伸浏览器窗口大小，位置均保持不变。

#myTopBtn{
bottom: 5px;
right: 5px;
position:fixed;
    }

实现点击后回到页面最上角

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

要实现回到屏幕最上方，需要了解如何通过JavaScript操作滚动条的上下移动。JavaScript提供了scrollBy和scroll方法。

window.scrollBy(0,-30) //屏幕上移30像素点
window.scroll(0,0) // 屏幕回到最上角

上述方法提到了如何移动滚动条，那么如何实现以一定速度移动到页面顶部的效果呢？这需要借助setInterval和clearInterval方法，实现每10毫秒屏幕上移30个像素点。

<body>
<div id="myDiv" >
</div>
<button id="myTopBtn" onclick="TopFunc()">To Top</button>
</body>

var myVar；
function TopFunc(){
myVar=setInterval(EachScrollBy,10);
    }
function EachScrollBy(eachHeight){
 if(document.documentElement.scrollTop<=0){
 clearInterval(myVar);
 }else{
 window.scrollBy(0,-30);
 }
 }

扩展：相关DOM属性参考

三、扩展

实现了置顶按钮后，如何实现点击按钮使屏幕置底呢？原理类似，此处不再提供Demo，但提供一些相关属性供参考。

网页可见区域宽：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.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

以上就是本文的全部内容，希望喜欢折腾博客的读者能够喜欢。