Moving scrollbars according to element position

clamp = (value, min, max) => {
  if (value < min) return min;
  else if (value > max) return max;
  return value;
};

const playground = document.getElementById('playground');
const viewarea = document.getElementById('viewarea');

const selfUser = document.getElementById('user1');

window.playgroundBounding = { minX: 0, maxX: playground.clientWidth, minY: 0, maxY: playground.clientHeight };

playground.onmouseup = function (e) {
  if (e.button === 0) mouseClicked(e);
};

function mouseClicked(event) {
  
  xposition = event.clientX + viewarea.scrollLeft - selfUser.offsetWidth / 2;
  yposition = event.clientY + viewarea.scrollTop - selfUser.offsetHeight / 2;


  xposition = clamp(xposition, window.playgroundBounding.minX, window.playgroundBounding.maxX - selfUser.offsetWidth);
  yposition = clamp(yposition, window.playgroundBounding.minY, window.playgroundBounding.maxY - selfUser.offsetHeight);
 
  $(selfUser).animate(
    {
      left: xposition + 'px',
      top: yposition + 'px',
    },
    500,
    'linear'
  );
 viewarea.scrollTo(xposition, yposition)
}

body {
  margin:0;
  padding:0;
}
#viewarea {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: relative;
    scroll-behavior: smooth;
    transform-origin: left top;
    top:0px;
    left:0px;
    /*overflow: hidden;*/ 
}

#playground {
    width: 1920px;
    height: 1080px;
    background-image: url('https://www.tynker.com/projects/screenshot/60390c5cde3bf81ccf3101f6/erosion.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
    position: relative;
    scroll-behavior: smooth;
    transform: translate(0px, 0px) scale(1, 1);
    left: 0px;
    top:0px;

}

.avatar {
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    color: blue;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move;
    user-select: none;
    transition: transform 0.1s ease-in;
    position:absolute;
}

.avatar-image {
    width: 30vw;
    height: 30vw;
    background: url("https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200") top left / cover no-repeat;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 3px solid white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="viewarea">
      <div id="playground">
        <div class="avatar " id="user1">
          <div class="avatar-image">
            <div class="user-name"></div>
          </div>
        </div>
      </div>
    </div>