Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 返回页面顶部及去页面底部的js实现代码

返回页面顶部及去页面底部的js实现代码

发布时间:2014-10-21   编辑:www.jquerycn.cn
本文介绍返回页面顶部与去页面底部的实现方法与代码,有需要的朋友,可以参考下。

大家应该都见过这样的功能:在页面的一侧有个 返回顶部、到达底部 之类的功能。

本文用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>

看了上面的代码,有什么感想呢?解决问题的方法,不止一种,多探索,勤实践,技术水平一定会快速提高的。
jquery中文网,祝大家学习进步。

您可能感兴趣的文章:
隐藏与显示回到顶部按钮的js代码
返回顶端的js代码(纯文字版)
网页中返回顶部代码(多种方法)另附注释说明
仿新浪微博返回顶部的jquery实现代码
页面回到顶部的三种实现方法(锚标记,js)
返回页面顶部及去页面底部的js实现代码
js滚动条回到顶部示例代码
变速返回顶部的Js代码
javascript 回到顶部示例
jQuery下的返回顶部功能的实现实例页面

关键词: 返回顶部  回到顶部   
[关闭]