大家应该都见过这样的功能：在页面的一侧有个 返回顶部、到达底部 之类的功能。
本文用JS脚本来实现这样的功能，与以往的那种靠#锚点的方法略有不同。
1、到达顶部：
复制代码 代码示例:
window.scrollTo(0, 0);
2、到达底部：
复制代码 代码示例:
window.scrollTo(0, 99999);//一般页面长度都不够99999吧？
3、页侧固定的，不随页面一起滚动区域：
1）、CSS代码
复制代码 代码示例:
<style type="text/css">
#divPanel{position:fixed;top:50px;right:250px;width:20px;height:650px; background-color:#FBDBE6;cursor:pointer;padding:0;font-size:12px;text-align:center;}
#divNext{height:580px;padding-top:10px;background-color:#FFDFF7;}
#divGoToBottom{height:60px;margin-top:5px; background-color:#FBaaaa;padding-top:10px;}
</style>
2）、HTML代码
复制代码 代码示例:
<div id="divPanel">
<div id="divNext" onclick="NextPage()">下一个</div>
<div id="divGoToBottom" onclick="GoToBottom()">到底部</div>
</div>
3）、javascript代码
复制代码 代码示例:
<script type="text/javascript">
function NextPage() {
var objNext = document.getElementById("<%=btnNext.ClientID %>");
if (objNext.
disabled == true) {
alert("已是最后一张。");
window.close();
}
else
objNext.click();
}
function GoToBottom() {
window.scrollTo(0, 99999);
return false;
}
</script>
看了上面的代码，有什么感想呢？解决问题的方法，不止一种，多探索，勤实践，技术水平一定会快速提高的。
脚本学堂，祝大家学习进步。
您可能感兴趣的文章：
JS一键返回顶部功能的代码分享
返回顶端的js代码(纯文字版)
隐藏与显示回到顶部按钮的js代码
