JavaScript/Jquery返回顶部代码

Posted 2020-09-23 张玉宝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript/Jquery返回顶部代码相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <title>返回顶部</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.8.2.js"></script>
        <style type="text/css">
            body{
                height:2000px;
            }
            #scrollTop{
                position:fixed;
                width:36px;
                height:65px;
                bottom:100px;
                right:100px;
                text-align:center;
                background:url("images/7.png");             
                color:#FFF;
                font-size:12px;
                cursor:pointer;
                display:none;
            }
            #scrollTop:hover{
                background-position:0px -66px;
            }
        </style>
    </head>
    <body>
        <div id="scrollTop"></div>  
 
        <script type="text/javascript">           
            $(window).scroll(function(){                            
                if($(window).scrollTop()<=100){
                    $("#scrollTop").fadeOut(1000);  
                }else{
                    $("#scrollTop").fadeIn(1000);
                }
            })
            $("#scrollTop").click(function(){
                 $(‘body,html‘).animate({scrollTop:0},500);
            })
        </script>
 
    </body>
</html>

以上是关于JavaScript/Jquery返回顶部代码的主要内容，如果未能解决你的问题，请参考以下文章

javascript [jQuery]平滑滚动到页面顶部

使用 JavaScript/jQuery 滚动到 DIV 的顶部？

JavaScript-Tool：jquery.cxselect.js

返回顶部代码

AndroidListview返回顶部，快速返回顶部的功能实现，详解代码。

博客园-添加快速返回顶部的功能按键