After scroll down button for go to the top of the website will show smoothly

I need help with my scrool to top button. I set that the button will show after I scroll down 200px but i don´t know how to set that button will show smoothly or how to animate it. Can you help me?

Thank you.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let mybutton = document.getElementById("btnScrollToTop");

window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
const btnScrollToTop = document.querySelector("#btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth"
  })
});

<!-- language: lang-css -->

#btnScrollToTop {
  display: none;
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: #000;
  font-size: 22px;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1000;
}

#btnScrollToTop:hover {
  color: #fff;
  background-color: #ffb038;
  border: 1px solid #000;
  transition: all 0.5s ease-in-out;
}

<!-- language: lang-html -->

<button id="btnScrollToTop">
      <i class="fa-solid fa-arrow-up"></i>
</button>

<!-- end snippet -->

You can't achieve that by changing the button's display property as that property is NOT animatable.

A quick alternative to the display property, and that can be animatable, is to use the visibility property. Let's say we'll have a nice fade in and fade out effects on the button when that later appears and disappears respectively.

To do so, we'll need to use the opacity property along with the visibility property:

• Initially, the button is hidden using visibility: hidden rule and also to have a fade in/out effect we'll initially apply opacity: 0 rule as well so the button can fade in smoothly when we want to.
• Once the page scrolls after 200px we'll programmatically fade in the button by applying an opacity of 1 (opacity: 1) and also to set the visibility property to visible so our fade effect can run smoothly as we want.
• Lastly, when we need to hide the button like when we're at the top of the page, we'll revert the visibility and the opacity properties to hidden and 0 respectively so we get a nice fade out effect.

To optimize things a bit, we'll declare a new CSS class, let's call it visible, that we apply to the button when we need it to fade in and remove it (the class) when we want the button to fade out. With that class we only need to apply it or remove it from the button and we no longer need to change the button's styles manually on the JavaScript part.

Here's a quick demo, try to scroll down a bit and you'll see the fade in effect on the button and try to click it or manually scroll back up to see the fade out effect:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const toTopBtn = document.getElementById('btnScrollToTop'),
  scrollFunction = () => toTopBtn.classList[document.documentElement.scrollTop > 200 ? 'add' : 'remove']('visible');

window.addEventListener('scroll', scrollFunction);

toTopBtn.addEventListener('click', () => window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
}));

<!-- language: lang-css -->

/* only to showcase the hide/show on the button we add some scrolling region to the page */

body {
  height: 300vh;
  border: 2px solid red;
}

#btnScrollToTop {
  visibility: hidden;
  /* initially hidden */
  opacity: 0;
  /* initially set to "0" opacity */
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: #000;
  font-size: 22px;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1000;
  transition: all .4s 0s ease;
  /* needed to have a nice fade in/out transitions */
}

#btnScrollToTop:hover {
  color: #fff;
  background-color: #ffb038;
  border: 1px solid #000;
  transition: all 0.5s ease-in-out;
}


/* our new class that will allow the fade in/out effect */

#btnScrollToTop.visible {
  visibility: visible;
  opacity: 1;
}

<!-- language: lang-html -->

<button id="btnScrollToTop">Top</button>

<!-- end snippet -->