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

  • 内容
  • 相关

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

这个是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/grfx/82.html

二维码加载中……

发表评论

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

00:00 / 00:00
顺序播放