给你网站顶部添加滚动条,显示页面剩余多少能拉到底

感谢您访问小篮博客”,本站专注活动分享,SEO技术,网站源码,绿色软件等免费资源分享希望大家能够多多支持哦!喜欢本站的朋友可以把本站添加到书签或记住网址,本站网址:www.nswin.cc, 站长 QQ 123326923
  • 内容
  • 相关

这个教程是在懒人的小窝博客上看到了,我直接给搬过来了

这个是JS代码,把这个添加到你的网站模板的公共JS里面

QQ截图20170531162410.jpg


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


下面这个代码是添加到你网站页头文件最下面就可以了,代码如下:


<div id="load"></div>
下面最后一个代码是添加到你网站公共CSS文件里面的,代码如下



#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}
 
原文地址:http://suppore.cn/218.html#comment

本文标签:

版权声明:若无特殊注明,本文皆为《小蓝博客》网络转载而来。并不代表本站立场。

文章标题:给你网站顶部添加滚动条,显示页面剩余多少能拉到底

本文链接:https://www.nswin.cc/82.html

收录状态:[百度未收录]

二维码加载中……

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知