JSFiddle - React, Tailwind, and code Playground

by Rafael Cheruti

HTML

<div class="menu">
  <button id="addItem">Add item</button>
</div>
<div class="box">

</div>

CSS

.item{
  border: 1px solid #ccc;
  min-height: 20px;
  margin: 0 20px 100px;
}
.menu{
  margin: 0 0 20px;
}
a{
  margin: 0 10px 0;
}

JavaScript

$(function(){
  var menu = $('.menu');
  var box = $('.box');
  var body = $('body');
  var placeholder = /@/g;
  var nextId = 1;
  var elString = '<div class="item" id="element_@">Element @</div>';
  var buttonString = '<a href="#element_@">Go to @</a>';
  menu.on('click','#addItem',function(ev){
    menu.append( buttonString.replace(placeholder, nextId) );
    box.append( elString.replace(placeholder, nextId) );
    nextId++;
  });
  menu.on('click','a',function(ev){
    ev.preventDefault();
    var button = $(this);
    var id = button.attr('href');
    var el = $(id);
    //body[0].scrollTop = el[0].offsetTop;
    body.animate({
      scrollTop: el[0].offsetTop
    }, 1000);
  });
});