网页中,常常需要在页侧加个 返回顶部、到达底部 之类的功能。
以往,我只知道要用个锚,但点了以后,地址栏后面会带个“#”,显得十分落后和弱智。
其实也可以用JS脚本来实现:
到达顶部:
window.scrollTo(0, 0);
到达底部:
window.scrollTo(0, 99999);//一般页面长度都不够99999吧?
页侧固定的,不随页面一起滚动区域:
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>
HTML
- <div id="divPanel">
- <div id="divNext" οnclick="NextPage()">下一个</div>
- <div id="divGoToBottom" οnclick="GoToBottom()">到底部</div>
- </div>
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>