关键词搜索

源码搜索 ×
×

返回顶部及去底部

发布2012-01-30浏览5278次

详情内容

网页中,常常需要在页侧加个 返回顶部、到达底部 之类的功能。

以往,我只知道要用个锚,但点了以后,地址栏后面会带个“#”,显得十分落后和弱智。

其实也可以用JS脚本来实现:

到达顶部:

 window.scrollTo(0, 0);

到达底部:

 window.scrollTo(0, 99999);//一般页面长度都不够99999吧?


页侧固定的,不随页面一起滚动区域:

CSS

  1. <style type="text/css">
  2. #divPanel{position:fixed;top:50px;right:250px;width:20px;height:650px; background-color:#FBDBE6;cursor:pointer;padding:0;font-size:12px;text-align:center;}
  3. #divNext{height:580px;padding-top:10px;background-color:#FFDFF7;}
  4. #divGoToBottom{height:60px;margin-top:5px; background-color:#FBaaaa;padding-top:10px;}
  5. </style>

HTML

  1. <div id="divPanel">
  2. <div id="divNext" οnclick="NextPage()">下一个</div>
  3. <div id="divGoToBottom" οnclick="GoToBottom()">到底部</div>
  4. </div>

javascript

  1. <script type="text/javascript">
  2. function NextPage() {
  3. var objNext = document.getElementById("<%=btnNext.ClientID %>");
  4. if (objNext.disabled == true) {
  5. alert("已是最后一张。");
  6. window.close();
  7. }
  8. else
  9. objNext.click();
  10. }
  11. function GoToBottom() {
  12. window.scrollTo(0, 99999);
  13. return false;
  14. }
  15. </script>





相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载