js滚动条平滑移动示例代码


Posted in Javascript onMarch 29, 2016

本文实例为大家分享了js滚动条平滑移动相关代码,供大家参考,具体内容如下

html页

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title></title> 
  <script src="../Scripts/JavaScript9.js"></script> 
  <link href="../Content/StyleSheet9.css" rel="stylesheet" /> 
  <script src="../Scripts/cxc.js"></script> 
  <meta charset="utf-8" /> 
</head> 
<body> 
  <input type="button" id="bt" value="滑动滚动条" /> 
  <div id="back"> 
  </div> 
  <div id="container"> 
    <div id="main"> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>   
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
    </div> 
  </div> 
</body> 
</html>

js页

var body, back, container, main,bt; //dom 
 
window.onload = function () { 
  domload(); 
  dominit(); 
  events(); 
}; 
var domload = function () { 
  body = document.body; 
  back = $("back"); 
  container = $("container"); 
  main = $("main"); 
  bt = $("bt"); 
}; 
var dominit = function () { 
  setH(back, screenH); 
  setH(container, screenH); 
  setH(main, screenW); 
}; 
var events = function () { 
  AddEvent(bt, EventsType[0], function () { 
    var speed = 10; 
    var min = 0,max = 449; 
    var scrolldown = function () { 
      min += speed; 
      if (min < max) { 
        container.scrollTop = min; 
        setTimeout(scrolldown, 4); 
      } 
    }; 
    setTimeout(scrolldown, 100); 
  }); 
};

css页

* { 
  margin:0px; 
  padding:0px; 
} 
#back { 
  position: absolute; 
  width: 100%; 
  top: 0px; 
  left: 0px; 
  z-index: 1; 
  background-image: url('../Images/psbg/bg7.png'); 
} 
#container{ 
  position:absolute; 
  width:100%; 
  top:0px; 
  left:0px; 
  z-index:100; 
  overflow:auto; 
} 
#main{ 
  position:absolute; 
  width:100%; 
  top:0px; 
  left:0px; 
} 
.d{ 
  margin-top:50px; 
} 
#bt{ 
  position:absolute; 
  top:0; 
  right:50px; 
  z-index:200; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
JavaScript头像上传插件源码分享
Mar 29 #Javascript
js解决movebox移动问题
Mar 29 #Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 #Javascript
分析js闭包引起的事件注册问题
Mar 29 #Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 #Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 #Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 #Javascript
You might like
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
javascript操作css属性
2013/12/30 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
生产文员岗位职责
2014/04/05 职场文书
自我推荐信范文
2014/05/09 职场文书
旷课检讨书500字
2014/10/14 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
开会通知
2015/04/20 职场文书
2015年教师节主持词
2015/07/03 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
详解Oracle块修改跟踪功能
2021/11/07 Oracle