Javaｓｃｒｉｐｔ中顶按钮的实现

冷却回顶功能

JS核心代码


window.onscroll =函数（）{
var t = document.documentelement.scrolltop document.body.scrolltop | |；
无功top_div = document.getelementbyid（）；
如果（t = 300）{
top_div.style.display =块；
{人}
top_div.style.display =没有；
}
}


var = 20；
功能pagescroll（）{

document.getelementbyid（'flypig）。风格显示=阻止；
window.scrollby（0，10）； / /每次增加10px



如果（文件。身体。scrollTop = = 0）{
document.getelementbyid（'flypig）。风格。marginbottom = PTT + 'px；
PTT + PTT + 10；
}
scrolldelay = setTimeout（'pagescroll（）（）'，2）； / / 2毫秒重复执行一次

如果（PTT = 1000）{
PTT＝0；
document.getelementbyid（'flypig）。风格。marginbottom = 20 + 'px；
document.getelementbyid（'flypig）。风格显示=不关；
ClearTimeout（scrolldelay）；
}
/ / pagescroll结束
}




HTML





顶部按钮的实现


体{
保证金：0px；
}
# flypig {
显示：无；
浮点数：左；
位置：固定；
底部：20px；
左缘：75%；
光标：指针；
边距：20px；
}
# {
显示块；
浮点数：左；
位置：固定；
底部：10px；
左缘：75%；
光标：指针；
}



window.onscroll =函数（）{
var t = document.documentelement.scrolltop document.body.scrolltop | |；
无功top_div = document.getelementbyid（）；
如果（t = 300）{
top_div.style.display =块；
{人}
top_div.style.display =没有；
}
}

var = 20；
功能pagescroll（）{

document.getelementbyid（'flypig）。风格显示=阻止；
window.scrollby（0，10）； / /每次增加10px

如果（文件。身体。scrollTop = = 0）{
document.getelementbyid（'flypig）。风格。marginbottom = PTT + 'px；
PTT + PTT + 10；
}
scrolldelay = setTimeout（'pagescroll（）（）'，2）； / / 2毫秒重复执行一次

如果（PTT = 1000）{
PTT＝0；
document.getelementbyid（'flypig）。风格。marginbottom = 20 + 'px；
document.getelementbyid（'flypig）。风格显示=不关；
ClearTimeout（scrolldelay）；
}
/ / pagescroll结束
}


















请向下滑动





















































































回到顶端



以上是本文的全部内容，希望大家能喜欢。