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

本文实例为大家分享了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;
}

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

时间: 2016-03-28

JS实现的页面自定义滚动条效果

本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D

javascript jscroll模拟html元素滚动条

主流浏览器默认为html元素提供的滚动条不美观,而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的.比如ie可以通过样式来实现简单的美化.Webkit内核浏览器可以控制滚动条的显示效果,firefox则不允许用户为滚动条定义样式.但是对于追求友好的用户体验的前端开发人员,是不会被这些浏览器的不一致行为所阻止的.我们可以自己通过标准的html元素模拟来实现自定义的滚动条. 这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll,以下简称jscroll.jscro

JS去除iframe滚动条的方法

本文实例讲述了JS去除iframe滚动条的方法.分享给大家供大家参考.具体如下: 下面的代码可以通过修改scrolling来去除iframe的滚动条 <!DOCTYPE html> <html> <head> <script> function removeScroll() { document.getElementById("myframe").scrolling="no"; } </script> &l

基于JavaScript实现div层跟随滚动条滑动

在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 效果展示如下所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavScript页面悬浮框- 何问起</title><base target="_blank" /> <

js网页滚动条滚动事件实例分析

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

javascript自定义滚动条实现代码

在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示. 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中这三个问题深深地困扰我: 1.滚动条高度 2.每次点击向上.向下按钮的时候滚动条应该移动多少距离 3.每拖动1px滚动条,页面需要移动多少? 整个的框架大概是长这样的: 先来看看第一个问题.

javascript模拟滚动条实现代码

其实这样代码产生些了冗余.......不如单独写个Slider类 做为第一个版本还是保存起来 有时间的话 试着单独的写个Slider类 #container { height:200px;_height:198px;width:385px;border:1px solid #CCCCCC; } #container #content{ height:200px;width:370px;float:left;overflow:hidden; } #container #content div{ m

js模拟滚动条(横向竖向)

JS: 复制代码 代码如下: (function(win){     var doc = win.document,db = doc.body;     var mousewheel = 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';     var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};     skyScroll

JS模拟简易滚动条效果代码(附demo源码)

本文实例讲述了JS模拟简易滚动条效果的方法.分享给大家供大家参考,具体如下: 使用Js模拟滚动条.简易模式,类似手机上常见的滚动条. 效果如下: Js代码如下: var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称 // obj元素 必须指定高度,并设置overflow:hidden; //

jQuery iScroll.js 移动端滚动条美化插件第1/5页

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

原生js实现模拟滚动条

当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作

原生JavaScript实现滚动条效果

本文实例讲解原生JavaScript实现滚动条效果的相关代码,分享给大家供大家参考,具体内容如下 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根据滑动条块移动的百分比算出滚动区域的滚动程度,用marginLeft进行滚动,具体的写在注释里. 整体弄成了一个对象,防止各种乱七八糟的数据污染全局变量.另外,对象内部调用的函数也都写到了对象构造函数的里面,由于对象作用域链的原理,外部无法进行调用,防止不小心在外部调用. <!DOCTYPE html> <html> <

原生javascript实现分页效果

随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 function pageFunc(conf){ this.myFunc = conf.click //用户点击要执行的方法 this.total = conf.total; //总页数 this.currentPage = 1; //当前页码 this.init() //初始化 } pageFunc.prot

原生JavaScript实现Tooltip浮动提示框特效

使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点: 显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示出来 隐藏:鼠标移开时,ToolTip提示框自动隐藏 定位:ToolTip提示框的位置需要根据ToolTip超链接的位置来设置 可配置:ToolTip提示框可以根据参数不同,改变尺寸和显示内容 注意点: 1)border-radius和 box-shadow兼容写法 2)不论鼠标指针穿过被选元素或

原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】

本文实例讲述了原生JavaScript实现的淘宝轮播图效果.分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直接上图 HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF

原生javascript实现的一个简单动画效果

本文章向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head> <title>javascript实现的简单动画</title> <style type="text/css"&g

javascript返回顶部效果(自写代码)

现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &

jQuery制作仿Mac Lion OS滚动条效果

nanoScrollerJS是一款使用简单方式实现 Mac OS X Lion 系统滚动条效果的jQuery插件.该滚动条插件使用最小的HTML结构 .nano > .nano-content .其它的滚动条元素 .pane > .nano-slider 是在插件运行时动态加载的.该滚动条插件利用原生的滚动条可以工作在 iPad.iPhone 和一些 Android Tablets上. 使用方法 HTML结构 下面是该滚动条插件工作所必须的HTML结构: 复制代码 代码如下: <div

原生Javascript和jQuery做轮播图简单例子

接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮