search

Home  >  Article  >  Web Front-end  >  js scroll bar smooth movement sample code_javascript skills

js scroll bar smooth movement sample code_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:07:461712browse

The example in this article shares with you the code related to the smooth movement of the js scroll bar for your reference. The specific content is as follows

html page

<!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 page

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 page

* { 
  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; 
}

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Web front-end development tool - bower dependency package management tool_javascript skillsNext article：Web front-end development tool - bower dependency package management tool_javascript skills

Related articles

See more