可以在当前文章的网页下 F12打开控制台去试一试^ _ ^
1.效果图
2.为什么会玩这个
在平时我们会上在网上浏览一些网页
比如看小说 ,看一些技术类的教程像是菜鸟或是csdn,mdn等等
你会发现这些页面比较长不知道何时到头看起来有点不爽对吧
你是不是想直接看到你当前看到哪里的进度
当前滚动条 滚动了多少 还有多少要看
3.首次创作效果图
4怎么做的呢
4.1创建一个元素p标签
var a=document.createElement("p")
4.2把p设置样式 固定到左上角
a.style.position="fixed"
a.style.top="0"
a.style.left="0"
a.style.zIndex="99999999999"
4.3避免网页导航栏的遮盖
a.style.zIndex="99999999999"
4.4设置大小和颜色值
a.style.width="100%"
a.style.height="10px"
a.style.backgroundColor="red"
4.5插入到页面上
document.body.appendChild(a)
4.6js动态的设置 滚动条的长度 [3 行代码]
window.onscroll=function(en){
var cur=document.documentElement.scrollTop/(document.documentElement.scrollHeight-document.documentElement.clientHeight)
a