jQuery返回顶部代码_Html5返回顶部和底部代码

Demo实现了一般网页中常见的返回顶部和底部的Jquery特效、Demo是一款非常实用的效果、当你网站的内容多的时候、它就可以用上场了、有了它之后你就不用滚动你的鼠标就可以实让页面的滚动条滚动到顶部和底部、用法很简单、就几句代码、先看看效果吧

Css代码

body{height:3000px;}
    #updown{
    _top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop document.body.clientHeight-this.clientHeight-1));
    position: fixed;
    _position: absolute;
    top: 200px;
    right: 30px;
    display: none;    
}
#updown span{
    cursor:pointer;
    width:48px;
    height:50px;
    display:block;
}
#updown .up{
    background:url(images/updown.png) no-repeat;
}
#updown .up:hover{
    background:url(images/updown.png) top right no-repeat;
}
#updown .down{
    background:url(images/updown.png) bottom left no-repeat;
}
#updown .down:hover{
    background:url(images/updown.png) bottom right no-repeat;
}

jQuery代码

$(function(){
    $("#updown").css("top",window.screen.availHeight/2-100 "px");
    $(window).scroll(function() {        
        if($(window).scrollTop() >= 100){
            $(´#updown´).fadeIn(300); 
        }else{    
            $(´#updown´).fadeOut(300);    
        }  
    });
    $(´#updown .up´).click(function(){$(´html,body´).animate({scrollTop: ´0px´}, 800);});
    $(´#updown .down´).click(function(){$(´html,body´).animate({scrollTop: document.body.clientHeight ´px´}, 800);});
});

Html代码

<div id="updown">
    <span class="up"></span>
    <span class="down"></span>
</div>

实现返回顶部和底部的源代码下载链接: 点击下载实现返回顶部和底部源码 密码: v7e4