JS 判断滚动底部并加载更多效果。。。。。。。。。

<html lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>js网页滚动条滚动事件 </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 == scrollHeight

    if( 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 />以便页面出现滚动条

<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>

　　

JS 判断滚动底部并加载更多效果。。。。。。。。。的更多相关文章

  1. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  2. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

  3. UWP-ListView到底部自动加载更多数据

    原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...

  4. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  5. apiCloud实现加载更多效果，基本完美~

    apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...

  6. RecycleView 滑动到底部，加载更多

    android.support.v7 包提供了一个新的组件:RecycleView,用以提供一个灵活的列表试图.显示大型数据集,它支持局部刷新.显示动画等功能,可以用来取代ListView与GridV ...

  7. Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多

    http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...

  8. 关于H5判定区域里面滑动到底部，加载更多的总结

    1.如何判定H5中滑动到底部,然后加载更多的功能实现. 思路:我们需要设定一个固定高度的盒子,然后我们利用scroll来监听滚动,当scrollTop(滚动的距离) + clientHeight(页面 ...

  9. js如何实现上拉加载更多...

    我们在项目中经常使用到下拉加载更多,之前要么是底部写加载按钮,要么是引入插件.今天终于有时间手写一个了,之前感觉挺麻烦,明白原理后,其实很简单... scrollTop:滚动视窗的高度距离window ...

随机推荐

  1. 6.servlet和jsp的区别

    servlet和jsp的区别 jsp作为Servlet技术的扩展,经常会有人将jsp和Servlet搞混.本文,将为大家带来servlet和jsp的区别,希望对大家有所帮助. servlet和jsp的 ...

  2. 5.FileWriter 和 BufferWriter

    FileWriter 和 BufferWriter的使用场景  IO这块,各种Writer,Reader,让人眼晕 而在网上基本找不到在什么时候用哪个类,并且网上的IO demo 很多用法都是错的 在 ...

  3. SPA SEO thought

    angular, vue,ember,backbone等javascript framework大大方便了现代web开发,带来了用户体验的巨大提高,但是同时带来了另一个问题:SEO,由于搜索引擎无法运 ...

  4. selenium&phantomjs实战--漫话爬取

    为什么直接保存当前网页,而不是找到所有漫话链接,再有针对性的保存图片? 因为防盗链的原因,当直接保存漫话链接图片时,只能保存到防盗链的图片. #!/usr/bin/env python # _*_ c ...

  5. Elasticsearch入坑指南之RESTful API

    Elasticsearch入坑指南之RESTful API Tags:Elasticsearch ES为开发者提供了非常丰富的基于Http协议的Rest API,通过简单的Rest请求,就可以实现非常 ...

  6. ASP.NET MVC 5搭建自己的视图基架 （CodeTemplate）

    我们知道,在MVC项目中添加视图时,在添加面板有模板可以选择,这里会有人疑问,这个模板位于哪里?我可以搭建自己的基架吗? 首先回答第二个问题,答案是当然可以 我这里使用的是Visual Studio ...

  7. Flask 参数简介

    我们都知道学习了Flask的时候它里面的参数是有很多种的参数  都是需要相互进行调用传递的  今天就简要分析一些常见的参数 首先导入Flask之后看 源码 from flask import Flas ...

  8. android-eclips中logcat不显示信息的问题解决

    time:2015/11/20 1. logcat窗口不显示问题 解决: 参考[1] 2. logcat中不显示信息 (1)红米手机 (2)解决问题 * 有些文章提到重启eclipse,或者重启手机. ...

  9. Python学习---IO的异步[asyncio模块(no-http)]

    Asyncio进行异步IO请求操作: 1. @asyncio.coroutine  装饰任务函数 2. 函数内配合yield from 和装饰器@asyncio.coroutine 配合使用[固定格式 ...

  10. Python学习---django-debug-tools安装

    [官网]http://django-debug-toolbar.readthedocs.io/en/1.2/installation.html [更多安装参考]http://blog.csdn.net ...