美文网首页
简单jQuery根据屏幕下拉到一定高度显示返回顶部按钮代码

简单jQuery根据屏幕下拉到一定高度显示返回顶部按钮代码

作者: 雨墨清秋 | 来源:发表于2019-04-20 10:49 被阅读0次
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .panel{overflow:hidden;width:100%;height:1000px;}
    #return-top{position:fixed;bottom:10%;right:50px; width:60px;height:60px;background-color:#eee; text-align:center; display:none;}
    #return-top a{text-decoration:none; }
     
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    </head>
     
    <body>
    <div class="panel" style="background-color:red;"></div>
    <div class="panel" style="background-color:blue;"></div>
    <div class="panel" style="background-color:yellow;"></div>
    
    
    <div id="return-top"><a href="#">返回顶部</a></div>
    
    
    <script>
    $(function(){
        $('#return-top').hide();
        $(function(){
            $(window).scroll(function(){
                if($(window).scrollTop()>300){
                    $('#return-top').fadeIn(300);
                    }
                    else{$('#return-top').fadeOut(200);}
                
                });
                $('#return-top').click(function(){
                    
                    $('body,html').animate({scrollTop:0},300);
                    return false;
                    
                    })
            
            })
        
        
        })
    </script>
    </body>
    </html>
    

    作者:仰望星空的包子
    来源:CSDN
    原文:https://blog.csdn.net/sinat_21206105/article/details/52287654
    版权声明:本文为博主原创文章,转载请附上博文链接!

    相关文章

      网友评论

          本文标题:简单jQuery根据屏幕下拉到一定高度显示返回顶部按钮代码

          本文链接:https://www.haomeiwen.com/subject/zkekgqtx.html