當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS 判断滚动底部并加载更多效果。。。。。。。。。
生活随笔
收集整理的這篇文章主要介紹了
JS 判断滚动底部并加载更多效果。。。。。。。。。
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JS 判斷滾動底部并加載更多效果。。。。。。。。。
<html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js網(wǎng)頁滾動條滾動事件 </title> <style type="text/css"> #top_div{ position:fixed; bottom:80px; right:0; display:none; } </style> <script type="text/javascript"> window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); var loading = document.getElementById("loading"); vv.innerHTML="document.body.scrollHeight:"+document.body.scrollHeight+" body offsetHeight:"+document.body.offsetHeight;//scrollTop + clientHeight == scrollHeightif( document.body.scrollTop+ document.body.clientHeight >= document.body.scrollHeight) { top_div.style.display = "inline"; if(loading.style.display != "inline"){loading.style.display = "inline";count.value=(1+ parseInt(count.value));setTimeout("addItem(count.value);",2000);}} } function addItem(i){for(var j=0;j<10;j++){var box = document.createElement("div"); content.appendChild(box);box.style.cssText = "width:300px;font-size:12px;";box.innerHTML="<a href='#'>..........."+ i+"</a>"}loading.style.display = "none";}</script> </head> <body><div id="vv"></div> <br /> <a name="top">頂部<a> <div id="top_div"><a href="#top">返回頂部</a></div> <br /> <div id="content"><a href="#">...........</a></div> <br /> 這里盡量多些<br />以便頁面出現(xiàn)滾動條<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><div id="loading" style="position:fixed;bottom:20px;line-height:40px;background-color: #F00;color: #fff; display:none;">loaing............................................................................................................<input id="count" type='text' value="0"/> </div></body> </html>
轉(zhuǎn)載于:https://www.cnblogs.com/wgscd/p/4689067.html
總結(jié)
以上是生活随笔為你收集整理的JS 判断滚动底部并加载更多效果。。。。。。。。。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ecshop二次开发必备--数据库说明2
- 下一篇： 手把手教你使用si9000计算高速差分线