回到顶部功能

　　前几天，在做博客的时候要用到“回到顶部”的功能，自己当时想的很简单，直接用<a href="#"></a>,但是浏览器地址栏上会多出一个#,感觉有点别扭的样子。后来又去问了同学，他们平时也没怎么注意这块。再后来去看了开源中国，博客园等发现。

　博客园: <a href="#top">与<a href="#">效果是一样的,都会在地址栏上多出#或者#top

　　

 

　　开源中国:用的是jquery

　　

 

　　然后我自己也用jquery来实现了一个:效果是一样的,地址栏也不会改变.

　　

<div class="scroll" id="scroll" style="display:none;">
        回到顶部
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        showScroll();
        function showScroll(){
            $(window).scroll( function() { 
                var scrollValue=$(window).scrollTop();
                scrollValue > 100 ? $('div[class=scroll]').fadeIn():$('div[class=scroll]').fadeOut();
            } );    
            $('#scroll').click(function(){
                $("html,body").animate({scrollTop:0},200);    
            });    
        }
    })

<style type="text/css">
    .scroll{
        width:80px;
        height:50px;
        background:#64BFAE;
        color:#fff;
        line-height:80px;
        text-align:center;
        position:fixed;
        right:30px;
        bottom:50px;
        cursor:pointer;
        font-size:14px;
    }
    </style>

 

</script>