页面返回顶部的具体实现方法

来源：互联网发布：cf比赛服辅助dll源码编辑：程序博客网时间：2024/05/22 05:02

WEB页面内容过多时，需要反复地拖动滚动条浏览页面内容，用户体验度自然会有折扣；为尽可能让用户浏览网页时提高舒适度，先提供的解决方案为：

当页面出现滚动条时，稍稍滑动滚动条，页面右下角就会出现【返回顶部】的按钮，点击该按钮，返回到页面顶部，具体实现方式为：

1、当前页面中引入scrolltop.js，内容：

/*长页面返回顶部*/function goTopEx() {var obj = document.getElementById("goTopBtn");/*获取距离顶部距离*/function getScrollTop() {return document.documentElement.scrollTop;}/*设置距离顶部距离*/function setScrollTop(value) {document.documentElement.scrollTop = value;}/*返回顶部图片样式*/window.onscroll = function () {getScrollTop() > 0 ? obj.style.display = "" : obj.style.display = "none";}/*点击事件*/obj.onclick = function () {var goTop = setInterval(scrollMove, 10);function scrollMove() {setScrollTop(getScrollTop() / 1.5);if (getScrollTop() < 1)clearInterval(goTop);}}}

2、当前页面中添加该DIV：

<div style="display: none;" id="goTopBtn"><img border=0 src="${ctx}/static/images/top.gif" title="返回顶部"/></div>

3、当前页面加载时调用scrolltop.js中的goTopEx();方法：

<script type="text/javascript">$(document).ready(function(){goTopEx();});</script>

通过以上代码的编写，即可实现返回页面顶部的功能。