Discussion on: Do you need a selector engine like jQuery, Sizzle or something else?

[Frank Wisniewski]

There are many ways to Rome, of course I know that this can also be solved in other ways.

As you may have overlooked, the code was designed as a plugin. That's why the ready, scope!!

It's not about a CodeGolf competition.

In my opinion, your code is unnecessarily complicated, why use template?

Why the strange way via the hidden attribute, which is ultimately misused as a class?

Why assign the circle attribute in the CSS?

All of this means that the code shown does not work on IOS devices, for example!!

sample code, if you don't design it as a plugin:

css

.hidden {
  display: none;
}

.scroll-button {
  bottom: 10px;
  cursor: pointer;
  opacity: 0.5;
  position: fixed;
  right: 10px;
  transition: all ease 400ms;
  width: 50px;
  z-index: 1000;
}

.scroll-button:hover {
  opacity: 1;
}

.scroll-button circle {
    fill: red;
  }

.scroll-button path {
  stroke: #fff;
  stroke-width: 15;
  stroke-linecap: round;
}

Javascript:

  document.body.insertAdjacentHTML( 'beforeend', 
      `<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
        id = scrollButton class="scroll-button hidden" 
         viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
        <path d="M50 80 L50 20 M50 20 L80 50 M50 20 L20 50" />
      </svg>` )

  scrollButton.onclick=() =>
    document.body.scrollIntoView( { behavior: "smooth" } )

  window.addEventListener( 'scroll', () => 
    scrollButton.classList.toggle('hidden', 
    document.documentElement.scrollTop < 100 ))