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

首先贴出CSS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>

 

页面部分:

1
2
3
4
<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部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//回到顶部
        $("#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();
            }
        });

  

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

 

作者:itbaby

出处:https://www.cnblogs.com/itbaby/p/9649808.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   知风阁  阅读(1402)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
more_horiz
keyboard_arrow_up light_mode palette
选择主题
点击右上角即可分享
微信分享提示