Scroll to element on click with velocity.js

by Anurak Sumranphan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div class="container">
  <button id="btn">
    trigger
  </button>
</div>
<div id="test">
  element test
</div>

CSS

body {
  position: relative;
}
#test {
  position: absolute;
  top: 1500px;
  left: 0;
  background: red;
  color: #fff;
  padding: 10px 0;
  width: 100%;
  text-indent: 10px;
}
.container {
  background: blue;
  position: fixed;
  top: 0;
  left:0;
  height: 40px;
  width: 100%;
  padding: 10px 0 0 10px;
}
button {
  color: blue;
  background: #fff;
  padding: 5px;
  border: none;
  cursor: pointer;
}

JavaScript

var elem = document.getElementById('test');
var trigger = document.getElementById('btn');

trigger.addEventListener('click', function(event) {
  Velocity(elem, "scroll", { duration: 750, easing: "linear" });
});