jq返回顶部

最新推荐文章于 2022-05-17 20:33:28 发布

yanfangphp

最新推荐文章于 2022-05-17 20:33:28 发布

阅读量1.2k

点赞数

分类专栏： js和jq学习

本文链接：https://blog.csdn.net/yanfangphp/article/details/9340851

版权

js和jq学习专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Top</title>
</head>
<style type="text/css">
#main
    {
    margin:0 auto;
    border:1px groove;
    width:800px;
    height:1500px;
    font-size:50px;
    text-align:center;
    padding-top:50px;
    }
</style>
<body>

<div id="main">向下滑动试试</div>
<script src="./js/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
.backToTop {
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}
</style>

<script language="javascript">;
(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
        .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 120);
    }), $backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            $backToTopEle.css("top", st + winh - 166);
        }
    };
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();
</script>
</body>
</html>