head first 一起实现js无缝上下滚动效果

   在开始手动敲代码之前我们先谈谈js上下滚动效果的基本原理，上个图先：

恩，图好像画的有点丑。。。

 

基本原理大致可分为以下几点：

 

 1.(满足条件)需要滚动的区域（绿色边框）的高度必须大于可视区域（白色区域）的高度，不然就没有滚动的意义了.;

 

 2.(如何进行滚动)js中如何让一个div移动起来，一般都是改变它的属性值，比如：top,left,margin-top,margin-left,....等等，那么这里我们需要通过改变滚动区域的top值，也就是让 top-- 不断然他向上移动；

 

 3.但是我们不可能让他一直向上移动的，所以我们的想办法让它"回头"，也就是通过DOM操作让向上移出的部分重新回到末尾，通过appendChild（）来实现;

 

分析完之后我们就开始写代码吧，首先是布局：

  html:

 css:

 大致的页面效果是这样的：

凑合着看吧，，，接下来我们开始用js让它向上滚动：

 
      就是这么的简单，效果图就不上了，另附demo，，其实这段js代码还是有点小bug的只适用于类似的DOM结构，如果滚动区域的DOM复杂一点，当然可以通过原生js解决，不过还是用jQuery方便一些，见下回慢慢道来。。