顶部滚动条(预览页面剩余长度)

html 代码

<div id="load"></div>
css 代码
#load {
    background-color: #2299dd;
    height: 2px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}
js 代码
$(function() {
    function scroll_fn() {
        document_height = $(document).height();
        scroll_so_far = $(window).scrollTop();
        window_height = $(window).height();
        max_scroll = document_height - window_height;
        scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%')
    }
    $(window).scroll(function() {
        scroll_fn()
    });
    $(window).resize(function() {
        scroll_fn()
    })
});

更多效果请查看本站。
参考自 友人C

返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论

7 条评论
  1. ahxx 铂金   ahxx  

    博主大大我研究了好久还是没成功,麻烦您能到我网站看看是什么原因吗https://xdr.nz
    拜托了@(不高兴)

    1. 小尾巴 王者   小尾巴   博主
      @ ahxx

      先处理下控制台的报错吧

  2. ahxx 铂金   ahxx  

    大大,请问CSS部分要加到哪里,麻烦指点一下
    您的邮箱输入框不能实现打字特效
    昵称 网站 评论框都可以@(哈哈)

    1. 小尾巴 王者   小尾巴   博主
      @ ahxx

      CSS 加到公共样式文件里就可以的。
      邮箱输入框不能实现打字特效怪插件,bug @(笑尿)

      1. ahxx 铂金   ahxx  
        @ 小尾巴

        还是不会,麻烦大佬能详细点@(乖)

        1. 小尾巴 王者   小尾巴   博主
          @ ahxx

          加到 xxx.css 文件的末尾里。
          附赠知识链接:http://www.w3school.com.cn/css/css_howto.asp

          1. ahxx 铂金   ahxx  
            @ 小尾巴

            谢谢博主大大的解答@(爱心)