实现页面某位置点击到底部和回顶部

标签：

实现效果和hao123 首页那样 

开始页面加载默认 “到底部”，当滚动条拉到一定位置后 “到底部” 自动改变为 “回顶部”；点击 “到底部” 页面会跳转到最底部，点击 “回顶部” 页面又会自动跳转到最顶部.

实现代码如下：

先引用 jquery 脚本。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

写样式，div定位在屏幕末位置上（不会因为滚动条滚动而改变位置）

<style type="text/css">
     #to
         {
            color: Blue;
            position: fixed;
            bottom: 20px;
            right: 20px;
            cursor: pointer;
          }
</style>

绑定滚动条事件，当滚动条下拉到一定位置后，改变div的html值从默认加载时候的 “到底部”  改为 “回顶部”。

<script type="text/javascript">
         $(function () {
                    //绑定滚动条事件
                    $(window).bind("scroll", function () {
                       var sTop = $(window).scrollTop();
                       var sTop1 = parseInt(sTop);
                         //设置滚动条拉到什么位置改变div的html值
                         if (sTop1 >= 530) {
                                       $("#to").html("回顶部");
                               }
                            else {
                                       $("#to").html("到底部");
                                   }
                    });

                  //为div添加点击事件
                 $(‘#to‘).click(function () {
                      //判断div的html值，根据值来实现是到底部还是回顶部
                     if ($("#to").html() == "回顶部") {
                                     //页面跳转到顶部
                                     $(‘html,body‘).animate({ scrollTop: ‘0px‘ }, 1000); return false;
                       } else {
                                    //页面跳转到底部
                                     $(‘html,body‘).animate({ scrollTop: $(‘#footer‘).offset().top }, 1000); return false;
                               }
                             });
                        })
</script>

下面body里面：

<div id="to">
到底部
</div>

底部锁定用来跳转的a标签：

<a name="footer" id="footer"></a><font color="blue">这是底部</font>

实现页面某位置点击到底部和回顶部

标签：

原文地址：http://www.cnblogs.com/dianshen520/p/4643529.html