Showing a "back-to-top"-button after scrolling a certain amount
Does the longer version have a better performance?


No, the longer version has two different if conditions and you're recalculating the scroll area twice (i.e.: document.body.scrollTop &gt; 100 || document.documentElement.scrollTop &gt; 100 and document.body.scrollTop &lt;= 100 || document.documentElement.scrollTop &lt;= 100)




  Does the browser optimize it itself – i.e. in the short version if the class is already present, it doesn't repaint?


Yes, if the class name already exists it'll simply be ignored.

classList MDN Documentation:


  add( String [, String [, ...]] )
  
  Adds the specified class values. If these classes already exist in the element's class attribute they are ignored.




Handling the scroll event can be performant heavy if you have a complex handler as the scroll event will be continuously fired during a scroll.

If you wish to optimize your scroll event handler, I would highly recommend using setTimeout. This allows your script to ONLY be called once the scroll has ended and skips doing your "heavy" condition checking for every scroll tick.



let setTimeoutId = null;
window.addEventListener('scroll', event =&gt; {
  //clear a previously pending timeout
  clearTimeout(setTimeoutId);
  //create a new timeout that will be launched in 400ms
  setTimeoutId = setTimeout(()=&gt;onScroll(event), 100);
});

function onScroll(event){
  console.log("On scroll called");
}
body {
  height: 2000px;
  background-color: lightblue;
}