天天看點

jquery實作置頂和置底特效

Jquery實作置頂和置底特效是一款非常實用的效果,當你網站的内容多的時候,它就可以用上場了,有了它之後你就不用滾動你的滑鼠就可以實讓頁面的滾動條滾動到頂部和底部,用法很簡單,不說了,看效果吧

效果如下:

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);});  
});