javascript – Smooth page scrolling without jQuery

Question:

I have two questions that need to be implemented without jQuery :

  1. How to smoothly scroll a page with a scroll wheel in JavaScript ?
  2. How to smoothly scroll a page a few pixels?

Answer:

var get = function(obj) {
  return document.getElementById(obj)
};
get('scrollbox').onwheel = function(e) {
  var delta = e.deltaY;
  delta = (delta > 0) ? 30 : -30;
  get('scrollbox').style.top = delta + get('scrollbox').offsetTop + 'px';
  e.preventDefault();
}
get('scroll').onclick = function() {
  get('scrollbox').style.top = -30 + get('scrollbox').offsetTop + 'px';
}
#block {
  width: 300px;
  height: 300px;
  background-color: #dddddd;
  position: absolute;
  padding: 5px;
}
#scrolling {
  width: 100%;
  overflow: hidden;
  height: 100%;
}
#scrollbox {
  position: relative;
  transition: 0.2s;
}
#scroll {
  right: 0%;
  top: 0%;
  position: absolute;
  width: 100px;
  height: 25px;
  background-color: white;
}
<html>

<body>
  <div id='block'>
    <div id='scrolling'>
      <div id='scrollbox'>
        la
        <br>ga
        <br>ha
        <br>aa
        <br>lj
        <br>va
        <br>ja
        <br>la
        <br>va
        <br>aa
        <br>lm
        <br>la
        <br>ga
        <br>ha
        <br>aa
        <br>lj
        <br>va
        <br>ja
        <br>la
        <br>va
        <br>aa
        <br>lm
        <br>la
        <br>ga
        <br>ha
        <br>aa
        <br>lj
        <br>va
        <br>ja
        <br>la
        <br>va
        <br>aa
        <br>lm
        <br>la
        <br>ga
        <br>ha
        <br>aa
        <br>lj
        <br>va
        <br>ja
        <br>la
        <br>va
        <br>aa
        <br>lm
        <br>la
        <br>ga
        <br>ha
        <br>aa
        <br>lj
      </div>
      <div id='scroll'>прокрутить
      </div>
    </div>
  </div>
</body>

</html>
Scroll to Top