Кнопка плавного скроллинга до верхушки html документа | Smooth scrolling button to the top of the html document

index.html

  <div id="up-arrow"></div>
</footer>

script.js

/**
 * @source: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#answer-4819886
 **/
 function isTouchDevice() {
  return ( ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) );
}



// Go Top Button
$(function() {
 

	const $goTop = $('#goTop');
	const speedMs = 500;
	const showTriggerPx = 350;

	if (isTouchDevice()) {
		$goTop.addClass('--touch');
	}

	goTopInitialize();//on load

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

	function goTopInitialize() {
		let scrolled = window.pageYOffset || document.documentElement.scrollTop; 

		$goTop
			.show()
			.css('opacity', '.7');

		if (scrolled <= showTriggerPx || scrolled === 0) {
			$goTop
				.hide()
				.css('opacity', '0.3');
		}
	}

  $goTop.on('click', function() {
      $('html, body').animate(
          {
              scrollTop: 0
          },
          speedMs
      );
      $(this).hide();
      return true;
  });
 
});

style.css

#up-arrow {
  background: #fff url(../img/up-arrow.svg) no-repeat center;
  background-size: 60%;
  padding: 30px;
  position: fixed;
  right: 20px;
  bottom: 15px;
  transition: 400ms;
}
#up-arrow:hover {
  transform: scale(1.1);
  opacity: 0.9 !important;
  cursor: pointer;
}

up-arrow.svg

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="284.929px" height="284.929px" viewBox="0 0 284.929 284.929" style="enable-background:new 0 0 284.929 284.929;"
	 xml:space="preserve">
<g>
	<path d="M282.082,195.285L149.028,62.24c-1.901-1.903-4.088-2.856-6.562-2.856s-4.665,0.953-6.567,2.856L2.856,195.285
		C0.95,197.191,0,199.378,0,201.853c0,2.474,0.953,4.664,2.856,6.566l14.272,14.271c1.903,1.903,4.093,2.854,6.567,2.854
		c2.474,0,4.664-0.951,6.567-2.854l112.204-112.202l112.208,112.209c1.902,1.903,4.093,2.848,6.563,2.848
		c2.478,0,4.668-0.951,6.57-2.848l14.274-14.277c1.902-1.902,2.847-4.093,2.847-6.566
		C284.929,199.378,283.984,197.188,282.082,195.285z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>