JavaScript 实现回到顶部小插件

来自csdn首页,留作备用

CSS

<style>
.top_arrow {
    border: 0 none;
    bottom: 150px;
    cursor: pointer;
    display: block;
    height: auto;
    margin: 0;
    opacity: 0.5;
    padding: 0;
    position: fixed;
    right: 40px;
    width: 35px;
    z-index: 2147483647;
}
</style>

JavaScript

<script type="text/javascript">
    $(document).ready(function(){
    
    //首先将#top_arrow隐藏
    $("#top_arrow").hide();
    
    //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
    $(function () {
        $(window).scroll(function(){
        if ($(window).scrollTop()>100){
            $("#top_arrow").fadeIn(400);
        }
        else
        {
            $("#top_arrow").fadeOut(400);
        }
    });
    
    //当点击跳转链接后，回到页面顶部位置
    $("#top_arrow").click(function(){
                $('body,html').animate({scrollTop:0},400);
                return false;
            });
        });
    });
</script>

HTML

<img alt="Top_arrow" id="top_arrow" class="top_arrow" src="http://news.csdn.net//images/top_arrow.png" style="display: block; cursor: pointer;">

IMAGE