1、随滚动条滚动
var oDiv = document.getElementById("box"); oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + "px"; var timer = null; window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var t = scrollTop + (document.documentElement.clientHeight - oDiv.offsetHeight)/2; t = parseInt(t); moveTo(t); } function moveTo(iTarget){ clearInterval(timer); timer = setInterval(function (){ var iSpeed = (iTarget-oDiv.offsetTop)/4; iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iTarget == oDiv.offsetTop){ clearInterval(timer); }else{ oDiv.style.top = oDiv.offsetTop + iSpeed + 'px'; } },30) }
2、滚动加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SCROLL</title> <script src="test/js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var elemt = 500; //插入元素高度/单位px var maxnum = 20; //设置加载最多次数 var num = 1; var totalheight = 0; var main = $("#content"); //主体元素 $(window).scroll(function(){ var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); //console.log("页面的文档高度 ："+$(document).height()); //console.log('浏览器的高度：'+$(window).height()); totalheight = parseFloat($(window).height()) + parseFloat(srollPos); if(($(document).height()-range) <= totalheight && num != maxnum) { main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>"); num++; } }); }); </script> </head> <body> <div id="content" style="height:960px"> <div id="follow">this is a scroll test;<br/>页面拉动加载</div> <div style='border:1px solid red ;margin-top:20px;color:green;height:800' >hello world test DIV</div> </div> </body> </html>