js 追加元素并定位到当前元素位置

 * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: cadetblue;
      overflow: auto;
    }

    p {
      height: 150px;
      border: 1px solid red;
    }

  <div class="box" id="box">
    <p onclick="aaa(this)">asdasd</p>
    <p id="pp" onclick="aaa(this)">asdasd</p>
    <button onclick="add(this)" id="btn">add</button>
  </div>

 
    let sqlBox = document.getElementById('box')
    let pp = document.getElementById('pp')

    function aaa(e) {
      let realTop = sqlBox.offsetTop;
      realTop += sqlBox.offsetParent.offsetTop;//父级到页面距离
      sqlBox.scrollTo(0, e.offsetTop - realTop)//减去父级离页面的距离
    }
    function add() {
      // 创建标签
      var para = document.createElement("p");
      // 添加 id 名 panel1
      para.id = "id1"
      // panel1.setAttribute("id","panel1");
      // 添加类名
      para.classList.add("class1");
      para.classList.add("class2");
      // 创建div的css样式
      para.style.cssText = "width:200px;height:200px;background:#CC3399;text-align:center;line-height:220px"
      // 创建文本
      var node = document.createTextNode("添加元素");
      // 标签追加文本
      para.appendChild(node);
      // 获取元素
      var element = document.getElementById("btn");
      // element追加para
      element.before(para);
      setTimeout(() => {//加入队列
      sqlBox.scrollTo(0, para.offsetTop )
        console.log(para.offsetTop);
      });
    }