js巧用scrollTop属性使滚动条以另一种方式表现（兼容）

kos — Mon, 09 Nov 2009 17:16:49 +0000

　　很久没写东西了，最近网上到处找一些处理滚动的js
看来看去，看到恼火，都是些长篇大论，写得太多，本想在里面找个好用点的收集到起，结果不好用的归不好用，复杂的归复杂，最后还是自己动手写了一个简单的

先研究一下想法
　　在网页的很多地方可能大家都讨厌滚动条，比如页面上有背景颜色，而改变滚动条的样式只有ie6内核的浏览器支持，所以可以不要滚动条，而一样达到滚动的效果，这里有个例子是实现上下滚动
再来谈一下思路
　　1、点击一个按钮即让里面内容上下滚动其实就是让scrollTop的值发生改变
　　2、当内容顶对齐后就不再要向上点击的按钮，向下亦同，即判断scrollTop的值和内容的实际高度与外面容器的值的关系

来个例子让大家看看才是真的(兼容的哦)：



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/menuscroll.css"> </head>  <body onLoad="setmenu()"> <div class="mainDiv"> <div id="menutop"></div> <div id="cov"> 	<div id="menu"> 	  <p class="contenttitle">快乐不快乐(郑秀文)</p> 	  <p>咖啡淡了</p> 	  <p>是因为冰块溶了</p> 	  <p>没怎么了</p> 	  <p>淡了就是淡了</p> 	  <p>搁在桌上还要不要</p> 	  <p>不再爱了</p> 	  <p>是因为感情坏了</p> 	  <p>你怎么了</p> 	  <p>坏了就是坏了</p> 	  <p>没有什么大不了</p> 	  <p>我们不快乐</p> 	  <p>快乐后不再快乐</p> 	  <p>就在最后的一秒</p> 	  <p>抱了吻了哭了</p> 	  <p>快乐不快乐</p> 	  <p>没人快不快乐</p> 	  <p>就在最后的一秒</p> 	  <p>我们的关系就这样了</p> 	  <p> </p> 	</div> </div> <div id="menubottom"></div> </div> </body> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/menuscroll.js"></script> </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

相关下载：
　　css下载：menuscroll.css
　　js下载：menuscroll.js

散人笔记 » scrollTop

js巧用scrollTop属性使滚动条以另一种方式表现（兼容）