导航

jquery实现置顶和置底特效

Posted on 2012-09-22 21:36  eastson  阅读(3184)  评论(0)  编辑  收藏  举报
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);});  
});