html+Jquery+css实现返回顶部

准备jquery 库和返回顶部图片

1，html部分代码

<!-- 回到顶部 -->

    <div class="back2top" >

        <a href="javascript:;">

            <img src="back2top.png" alt="">

        </a>

    </div>

2，css部分样式

<style>

    *{

        padding: 0;

        margin: 0;

    }

    #top{

        position: absolute;

        top:0;

    }

    .back2top{

        position: fixed;

        bottom: 10px;

        right:10px;

        width: 40px;

        height: 40px;

    }

    .back2top a{

        display: block;

        width: 100%;

    }

    .back2top a img{

        width: 100%;

    }



</style>

3，引入jquery库

<script src="jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

4，jquery部分代码

<script type="text/javascript">

    jQuery(document).ready(function($) {

        // 回到顶部

        $('.back2top').hide();

        

        $(window).scroll(function() {

            if($(window).scrollTop()>100){

                $('.back2top').fadeIn(1500);

            }else{

                $('.back2top').fadeOut(1500);

            }

        });

        $('.back2top a').click(function() {

            $('body,html').animate({scrollTop: 0}, 800);

            return false;

        });

    });

</script>