zoukankan      html  css  js  c++  java
  • 收藏一份简单好用的返回顶部和去底部代码,喜欢就拿走吧!

    首先贴出CSS部分:

     <style type="text/css">
       .fix_bar{
           position: fixed;
           right: 15px;
           bottom: 15px;
           z-index: 9999;
           cursor: pointer;
       }
         .layui-fixbar-top{
             font-size: 35px;
             background-color: rgba(0,0,0,.3);
             cursor: pointer;
         }
       .layui-fixbar-down{
           font-size: 35px;
           background-color: rgba(0,0,0,.3);
           cursor: pointer;
       }
    </style>
    

    页面部分:

    <ul class="fix_bar">
        <li class="layui-icon layui-fixbar-top" id="to_top" title="返回顶部">顶部图标</li>
        <li class="layui-icon layui-fixbar-down" id="to_bottom" title="去底部">底部图标</li>
    </ul>
    

      

    javascript部分:

    //回到顶部
            $("#to_top").click(function() {
                 $("html,body").animate({scrollTop:0}, 200);
            });
             $(document).scroll(function(){
                var scroll_top =  $(document).scrollTop();
                if(scroll_top > 800){
                     $("#to_top").show();
                }else{
                     $("#to_top").hide();
                }
            });
    //去底部
            $("#to_bottom").click(function() {
                $("html,body").animate({scrollTop:document.body.clientHeight + 'px'}, 200);
            });
             $(document).scroll(function(){
                var  scroll_top = $(document).scrollTop();
                if(scroll_top < 800){
                    $("#to_bottom").show();
                }else{
                     $("#to_bottom").hide();
                }
            });
    

      

    其实自己写一份也很容易,只是后端开发还是怕麻烦,直接用比较省力哈。喜欢就拿走吧,别忘了顶一下。

  • 相关阅读:
    项目结束后一点心得
    提交disabled按钮的几种方法
    发现VS2005一个BUG
    单一文件上传防止粘帖及格式限制
    MessageBox.Show常用的2个方法
    一点感受一点体会
    EXCEL导入GridView,然后再汇入数据库.
    2根ECC内存
    (转载)gridview添加删除确认对话框
    反射调用Method
  • 原文地址:https://www.cnblogs.com/phper12580/p/9649808.html
Copyright © 2011-2022 走看看