js+css实现返回顶部功能

<script>
    $(function () {
        var $backToTopEle = $('.toTop'), $backToTopFun = function () {
            var st = $(document).scrollTop(), winh = $(window).height();
            (st > 200) ? $backToTopEle.fadeIn('slow') : $backToTopEle.fadeOut('slow');
            //IE6下的定位
            if (!window.XMLHttpRequest) {
                $backToTopEle.css("top", st + winh - 166);
            }
        };
        $('.toTop').click(function () {
            $("html, body").animate({scrollTop: 0}, 1200);
        })
        $backToTopEle.hide();
        $backToTopFun();
        $(window).bind("scroll", $backToTopFun);
        $('#catalogWord').click(function () {
            $("#catalog").slideToggle(600);
        })
    })
</script>
<div class='toTop' style="opacity: 1;" title="返回顶部">
    <div class="arrow"></div>


    <div class="stick"></div>
</div>
.toTop > .stick {
    position: absolute;
    width: 8px;
    height: 14px;
    display: block;
    left: 15px;
    top: 15px;
    border-radius: 1px;
    background-color: #aaa
}


.toTop > .arrow {
    position: absolute;
    left: 10px;
    top: -1px;
    width: 0;
    height: 0;
    border: 9px solid rgba(126, 27, 27, 0);
    border-bottom-color: #aaa
}
相关文章
相关标签/搜索