p 請輸入要scroll到第幾個div(0~50)
input#num
button#go Go
div 0
div 1
div 2
div 3
div 4
div 5
div 6
div 7
div 8
div 9
div 10
div 11
div 12
div 13
div 14
div 15
div 16
div 17
div 18
div 19
div 20
div 21
div 22
div 23
div 24
div 25
div 26
div 27
div 28
div 29
div 30
div 31
div 32
div 33
div 34
div 35
div 36
div 37
div 38
div 39
div 40
div 41
div 42
div 43
div 44
div 45
div 46
div 47
div 48
div 49
div 50
View Compiled
*
  margin: 0
  padding: 0

div
  position: relative
  top: 0
  left: 0
  width: 100%
  height: 600px
  background-color: #f00
  color: #fff
  font-size: 100px
  margin-top: 10px
  text-align: center
  line-height: 600px
View Compiled
$('#go').click(()=>{  
  var num = $('#num').val();
  if(num){
    console.log(num);
    var target = $('div')[num];
    $.Velocity(target, 'scroll');
    //因為引入了jQuery,Velocity前面需加上$.
  }
  
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js