jQuery返回顶部代码_Html5返回顶部和底部代码
2016-04-12 14:03:25  By: dwtedx

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

jQuery返回顶部和底部


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+