标签 jQuery 下的文章

jQuery - 响应式回顶部按钮

js 代码

$(document).ready(function($){
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 300,
        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
        offset_opacity = 800,
        //duration of the top scrolling animation (in ms)
        scroll_top_duration = 700,
        //grab the "back to top" link
        $back_to_top = $('.cd-top');
    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) { 
            $back_to_top.addClass('cd-fade-out');
        }
    });
    //www.sucaijiayuan.com
    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
            }, scroll_top_duration
        );
    });
});

阅读全文

css3 + jquery 实现颜色渐变滚动条

js 代码

$(window).scroll(function(){
 var s=$(window).scrollTop();//滚动条和顶部的距离,默认单位:px. 
//所以当$(window).scrollTop()的值等于0时,就表示滚动条在最顶部。
 var a=$(document).height();//页面文档的总高度
 var b=$(window).height();//窗口能显示的最大高度
//页面文档高度-窗口的最大高度=s的最大值。即滚动条需要滚动的最大距离
 var result=parseInt(s/(a-b)*100);
//所以s/(a-b)就是滚动条相对于窗口的百分比。 
 $("#bar").css("width",result+"%");
 if(result>=0&&result<=19)
 $("#bar").css("background","#cccccc");
 if(result>=20&&result<=39)
 $("#bar").css("background","#50bcb6");
 if(result>=40&&result<=59)
 $("#bar").css("background","#85c440");
 if(result>=60&&result<=79)
 $("#bar").css("background","#f2b63c");
 if(result>=80&&result<=99)
 $("#bar").css("background","#FF0000");
 if(result==100)
 $("#bar").css("background","#5aaadb");
});

阅读全文