网页常用动态效果--回到顶部

关键将提示回到顶部的盒子固定定位在页面右下角，隐藏状态，当滚动坐标值大于了首屏高度后显示
html代码：

<body>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<span></span>
	</body>

　　CSS代码：

    <style>
            span{
                width:50px;
                height:50px;
                background: lightgoldenrodyellow;
                position: fixed;
                bottom:0;
                right:0;
                display:none;
            }
        </style>

JQ代码：

$(function(){
                    //获取首屏高度
                    var height1 = $(window).height();
                    //滚动事件
                    $(window).scroll(function(event) {
                        //获取当前滚动位置
                        var height2 = $(window).scrollTop();
                        // 判断
                        if(height2>height1){
                            $('span').fadeIn(500);
                        }else{
                            $('span').fadeOut(500);
                        }
                    });
                    $('span').click(function(){
                        $('html,body').animate({
                           scrollTop:0
                        },500);
                    })
 })

 

posted @ 2015-09-16 19:02  十三君  阅读(212)  评论(0)  编辑  收藏  举报