• 收藏一份简单好用的返回顶部和去底部代码,喜欢就拿走吧!


    首先贴出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();
                }
            });
    

      

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

  • 相关阅读:
    项目编写,寻找项目
    BP优化
    python hook的使用
    BN归一化
    mnist数据集使用torch进行卷积训练
    dropout
    Flip String to Monotone Increasing
    Reach a Number
    wordLadder i/ii
    Palindrome Partitioning II
  • 原文地址:https://www.cnblogs.com/phper12580/p/9649808.html
Copyright © 2020-2023  润新知