js简单单击返回到顶部效果实现方法

本文给出了JS简单单击返回到顶部特效实现方法的一个例子，供大家参考，具体分析如下：

当页面很长的时候，用户要返回页面的顶部，必须滚动好几次才能滚动回到顶部，如果在页面的右下角有一个返回到顶部的按钮，用户可以点击返回到顶部，对于用户来说，是一个很好的体验。

实现原则：当加载页面时，将元素定位到页面的右下角。当页面被滚动时，元素总是位于右下角，当用户单击时，页面会回到顶部。

关键点：document.documentelement.clientwidth document.body.clientwidth | |；视觉区宽度。后面是兼容Chrome，和前面的是与其他浏览器的兼容。

两点：otop.style.left = screenw - otop.offsetwidth + PX；当页面加载时，该元素的位置位于页面右侧，和元素的宽度从视口的宽度减去。

三点：otop.style.top = screenh - otop.offsetheight + scrollTop + PX；当页面滚动，该元素的Y坐标位置等于高度可见的面积减去元素本身的高度，再加上滚动的距离。

四点：document.documentelement.scrolltop = document.body.scrolltop = 0；当点击元素，让页面滚动距离0，写两是相容的。

上面的代码：

非所有权文件

身体{边缘：0；填充：0 }
# to_top {宽度：30px；身高：40px；padding: 20px；字体：14px / 20px宋体；文本对齐：中心；背景：# 06c；位置：绝对；鼠标指针；颜色：# FFF }。

在window.onload =函数（）{
VaR OTOP = document.getelementbyid（to_top ）；
无功screenw = document.documentelement.clientwidth document.body.clientwidth | |；
无功screenh = document.documentelement.clientheight document.body.clientheight | |；
otop.style.left = screenw - otop.offsetwidth +PX；
otop.style.top = screenh - otop.offsetheight +PX；
window.onscroll =函数（）{
VaR scrollTop = document.documentelement.scrolltop document.body.scrolltop | |；
otop.style.top = screenh - otop.offsetheight + scrollTop +PX；
}
otop.onclick =函数（）{
document.documentelement.scrolltop = document.body.scrolltop = 0；
}
}

回到顶端
回到顶端

希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。