这两天看到有博客在顶部以进度条的方式显示当前查看窗口在整个页面处于什么位置,很是炫酷,运用拿来主意,意气风发,哥不配置加载进度条,配置个阅读进度总可以吧。兴高采烈在DW里配置好,刷新!尼玛什么都没有,坑爹呢这是!

花了一个小查找原因,最后确认这个js需要调用网站内jquery.js里的方法,然后我网站内并没有,也老不原意把他的jquery.js拿来加载,必竟200多k是不,那也是要耗时间,本身我个小站打开就不那么快了还耗CPU。

愁苦之际,刘大神说自己写一个。大脑上瞬间有了个大大的感叹号,哟,有苦力在啊,于是就有了下面的两段代码:

网上大神@房东的猫写的:

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

HTML代码:

<div id="load"></div>

CSS代码:

#load {
background-color: #ff6651;
height: 3px;
width: 0px;
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
}

 


以下是我和@刘大神写的,好处是亲测可用,具体效果请上下滑动本文...:

JS代码:

<script type="text/javascript">
document.onscroll = function(){
var scrollDistance = getScrollTop();
var pxx = scrollAct(scrollDistance)
document.getElementById("readprogress").style.width = pxx;
}

function scrollAct(insetOff) {
var webHeight = document.body.scrollHeight - window.innerHeight;
var p = (insetOff / webHeight ) * 100;
return p.toString() + "%";
}
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
</script>

HTML代码:

<div id="readprogress"></div>

CSS代码:

#readprogress{
background-color: rgba(36,191,53,1.00);
height: 3px;
width: 0px;
position: fixed;
left: 0px;
top: 0px;
z-index: 999;
}

转载请注明from @skyarea


真正的英雄主义,是认清生活的真相后还依然热爱它。