看到右手边的小火箭了没有？网上很多类似的功能，我简单改造优化了以下，做个笔记。

主要分成两部分：css部分和js部分，当然jquery是标配，还有两个图（jq和图直接审查元素自行获取）

html代码

<div id="tortoise" style="cursor:crosshair;" title="瞄准点火">
    <div class="tortoiseReadying">
        <div class="tortoiseFlying">
        </div>
    </div>
</div>

css样式

#tortoise{
    background: url("/common/tortoise/readying.png") no-repeat scroll 0 0  transparent;
    display: block;
    height: 250px;
    width: 149px;
    overflow: hidden;
    border-color: red;
    position: fixed;
    margin:-125px 0 0;
    right: 0;
    top:80%;
    z-index: 12;
}
#tortoise .tortoiseReadying{
    background: url("/common/tortoise/readying.png") no-repeat scroll -149px 0;
    display:none;
    height:250px;
    width: 149px;
    z-index:11;
    overflow: hidden;
    position: absolute;
}

#tortoise .tortoiseReadying .tortoiseFlying{
    background: url("/common/tortoise/flying.gif") no-repeat;
    display:none;
    height:250px;
    width: 149px;
    z-index:10;
    overflow: hidden;
    position: absolute;
}

js（jquery）部分

<script type="text/javascript">
    $(document).ready(function () {


        //乌龟小火箭
        $("#tortoise").hide();
        $(window).scroll(function () {
            ($(window).scrollTop() <= 0) ? ($("#tortoise").fadeOut()) : ($("#tortoise").fadeIn('slow'));
        })

        $("#tortoise").hover(
            function () {
                $(".tortoiseReadying").fadeIn();
            },
            function () {
                $(".tortoiseReadying").fadeOut();
            }
        )

        $(".tortoiseReadying").click(
            function () {
                $(".tortoiseFlying").show();
                $("html,body").animate({scrollTop: 0}, "slow");
                $("#tortoise").delay("200").animate({marginTop: "-1000px"}, "slow", function () {
                    $("#tortoise").css("margin-top", "-125px");
                    $(".tortoiseFlying").hide();
                });

            })
    });

</script>

就完成了。