Issue #3325272 by VladimirAus, vknikolov, jannakha: Rewrite scrollup to use Vanila JS

css/scrollup_top.css

 .scrollup {
-  width: 50px;
-  height: 50px;
+  width: 80px;
+  height: 100px;
   position: fixed;
   bottom: 50px;
   text-indent: -9999px;
-  background: url('../images/arrow.png') center no-repeat;
-  border-radius: 50%;
+  background: url(../images/arrow.png) 50% 20% no-repeat;
   display: none;
 }
 
 .scroll-title {
   text-indent: 0;
-  min-width: 100px;
   position: relative;
-  top: 31px;
+  top: 15px;
+  text-align: center;
+  color:#fff;
 }
 
 a.scrollup {
   border-bottom-style: none;
   border-bottom: 0;
+  z-index: 10;
 }
 
 .scrollup:hover {

js/scrollup_top.js

 /**
  * @file
+ * ScrollUp javascript file.
  */
 
-(function ($, Drupal, drupalSettings, once) {
+(function (Drupal, drupalSettings, once) {
 
   Drupal.behaviors.scrollup = {
 
-    attach: function (context, settings) {
-      $(document).ready(function () {
-        if (drupalSettings.scrollup_title == '' || drupalSettings.scrollup_title == null) {
-          var scroll_title = '';
+    attach: function () {
+      let linkTitle = 'Scroll to the top of the page.';
+      let linkContent = '';
+      if (drupalSettings.scrollup_title !== '' && drupalSettings.scrollup_title !== null) {
+        linkTitle = drupalSettings.scrollup_title;
+        linkContent = drupalSettings.scrollup_title;
       }
-        else {
-          var scroll_title = drupalSettings.scrollup_title;
+
+      const bodyContainer = once('scrollup', document.querySelector('body'));
+
+      if (bodyContainer.length === 0) {
+        return;
       }
 
-        once('scrollToTop', 'body').forEach(function (element) {
-          $(element).append('<a href="#" title="' + scroll_title + '" class="scrollup">Scroll<div class="scroll-title">' + scroll_title + '</div></a>');
-        });
-        var position = drupalSettings.scrollup_position;
-        var button_bg_color = drupalSettings.scrollup_button_bg_color;
-        var hover_button_bg_color = drupalSettings.scrollup_button_hover_bg_color;
-        var scroll_window_position = parseInt(drupalSettings.scrollup_window_position);
-        var scroll_speed = parseInt(drupalSettings.scrollup_speed);
+      const [body] = bodyContainer;
+      body.insertAdjacentHTML("beforeend", `<a href="#" title="${linkTitle}" class="scrollup">Scroll<span class="scroll-title">${linkContent}</span></a>`);
+
+      const scrollUpButton = document.querySelector('.scrollup');
+      const position = drupalSettings.scrollup_position;
+      const button_bg_color = drupalSettings.scrollup_button_bg_color;
+      const hover_button_bg_color = drupalSettings.scrollup_button_hover_bg_color;
+      const scroll_window_position = parseInt(drupalSettings.scrollup_window_position);
+      const scroll_speed = parseInt(drupalSettings.scrollup_speed);
 
       if (position == 1) {
-          $('.scrollup').css({
-            "right": "100px",
-            "background-color": button_bg_color
-          });
+        document.dir === 'ltr' ? scrollUpButton.style.right = '0px' : scrollUpButton.style.left = '0px';
       }
       else {
-          $('.scrollup').css({
-            "left": "100px",
-            "background-color": button_bg_color
-          });
+        scrollUpButton.style.left = '0px';
       }
+      scrollUpButton.style.backgroundColor = `${button_bg_color}`;
 
-        $(".scrollup").hover(function () {
-          $(this).css("background-color", hover_button_bg_color);
-        }, function () {
-          $(this).css("background-color", button_bg_color);
+      scrollUpButton.addEventListener("mouseover", function (event) {
+        event.preventDefault();
+        scrollUpButton.style.backgroundColor = `${hover_button_bg_color}`;
       });
 
-        $(window).scroll(function () {
-          if ($(this).scrollTop() > scroll_window_position) {
-            $('.scrollup').fadeIn();
-          }
-          else {
-            $('.scrollup').fadeOut();
-          }
+      scrollUpButton.addEventListener("mouseleave", function (event) {
+        event.preventDefault();
+        scrollUpButton.style.backgroundColor = `${button_bg_color}`;
       });
 
-        $(".scrollup").click(function () {
-          $("html, body").animate({
-            scrollTop: 0
-          }, scroll_speed);
-          return false;
+      window.addEventListener('scroll', function (event) {
+        event.preventDefault();
+        scrollUpButton.style.display = (window.pageYOffset > scroll_window_position) ? 'block' : 'none';
       });
+
+      scrollUpButton.addEventListener('click', function (event) {
+        event.preventDefault();
+        document.querySelectorAll('html, body').forEach(node => node.scrollTo({
+          top: 0,
+          behavior: "smooth",
+          duration: scroll_speed
+        }))
       });
     }
   };
-})(jQuery, Drupal, drupalSettings, once);
+})(Drupal, drupalSettings, once);

scrollup.libraries.yml

 scrollup:
-  version: 1.x
+  version: 3.x
   css:
     theme:
       css/scrollup_top.css: {}
   js:
     js/scrollup_top.js: {}
   dependencies:
-    - core/jquery
     - core/drupalSettings
     - core/drupal
     - core/once