Animated back to top button with CSS

[LITUATUI]

The idea is to show a back to top button only after scrolling with CSS.

This article shows some methods that only use CSS, no JS.

I especially like this method with a fading button.

What do you guys think?

[McShelby]

I am not a fan of this. Reason is, that each new functionality needs additional space which is a sparse resource.

In the above mentioned implementation, it is done as an overlay. This may hides underlying content - especially on mobile devices. On huge desktops it may look ill placed as you have to decide whether it should be put over the text or to the very far right.

Additionally we would now end up with navigational elements not only at the top of the content but even on the bottom. This is something I like to avoid.

Functionality-wise I can not see much advantage. On a desktop you can use the keyboard or the mouse which is almost equally fast. On mobile you could also swipe.

[JohannOberdorfer]

I like the idea as it makes the page more interactive and more comfortable to scroll up :=).
You can achieve this with only 2 steps:

a.) In the ./layouts/partials/body.html add:

{{- partial "custom/goto_top_rocket.html" . }}

b.) and the shortcode source to be added as goto_top_rocket.html goes here:

<!-- scroll to top -->

<button onclick='topFunction()' id='myBtn' title='Go to top'></button>

<style>
	#myBtn {
		display:none;position:fixed;bottom:45px;right:30px;z-index:99;
		border:2px;outline:none;background-color:HoneyDew;cursor:pointer;padding:15px;
		border-radius:15px;width:40px;height:40px;	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAABJ0AAASdAHeZh94AAAAB3RJTUUH5wcPDRE1IGQ5vAAABEdJREFUWMPNWc9LMl0YPX5Egos2ThQpUhAk7kwNxJixaNWmbcuCWrd00SIUwj8gBFdta+ULoiC6caJFYEGLQKPciEKDtioT0Tjv4s35mnz7cvxR3wMXnHvvc+fMfc557g8NJDEskySJACDLsmFog5IcSnG73QRAAHS73RzWuEMZJBAIEAAfHh748PBAAAwEAvxfALy9vSUARqNRdiwajRIAb29v+eMAAdDlcvGjLS4u8g+DfhBgKBQiAFar1S6A1WqVABgKhQYCaehXxaVSifPz8xBFEYeHh6jVapp2QRCwv7+Ps7Mz3N/fw2azGb5VxUdHR6pqvypHR0f89hADYDAY5FcWDAYH4mJfToVCgQCYy+W+BJjL5QiAhUKB38bB5eVlNptN5HK5nvp7PB4YjUacn5/r5uE/eh1arRYqlQqWlpY09eFwGH6/H36/H+FwWNO2tLSESqWCVqs1epFks1kC4NPTE0ny7u5OFYMkSXxbjwmAd3d3JMmnpycCYDab5cg5mE6nO6Qn//CDFouFiqKodYqi0GKxdPVLp9OjB7i1tUWz2UyS1JGoaTabub29PXqAdrudGxsbJElRFClJ0qcKliSJoiiSJDc2Nmi323UD1C2SQqEAURR1c10URRQKBYxcxQAwNzcHAFhdXYUsy3h8fOzq8/j4CFmWsbq6qvEZuYoBMJlMashvs9k0PKxWq7TZbBqRJJPJvlaUsX4/6n3I7XY7JicnIUkS3rb8atvffEYSYpLqmcNg+HdBWFhYAEkcHByoX935vbCwoPbr+LyJavghNplMagKOx+PUa/F4XPU3mUwcqoqtVivb7bYapmKxqDtUHR+SaLfbsFqtHEqIY7EYK5UKyuUyAGB6eho3Nze6Ad7c3GBmZgYAUC6XUalUEIvFOHCIAXBvb08N1c7ODgVB0B1iQRC4u7urPu/t7fWk6v9szGQyBMDr62t14JOTE0366NUA8OTkRH2+vr4mAGYyGfYN0OVy0efzaV4kyzIBsF6v9wyuXq8TAGVZ1tT7fL7OiVC/SBqNBhRFgcfj0dQ7HA5MTEwgEon0zL9IJIKJiQk4HI6ujayiKGg0Gvo5eHV1RQDM5/NdM7K+vk6n09nzDDqdTq6vr3fV5/N5AuDV1RV1hziVSn3KtUQiQQAsFotfgisWiwTARCLxKTdTqRR1L3Wd7fnl5SUURdG0zc7OAgCOj4/h9/vRbDb/OobRaEQ2m1V9ksmkpn1qakrzLl0hfp/5R13eVqbh3iy8HYY4OTnZNTMdW1tbw/PzMy4uLvq/L+z3QN1rPgTAX79+8dvvZgwGA3VORF+zONbvzMdiMYyPj8Nms6FWq+Hl5QWCIAAAarUaTCYTBEFAqVRCu93+uSvg98fJlZUVrqys8MPxdKDxxzAEq9frAIDX19euukFtYIBer1fNi+/5PDs7C6/XOzDAgdLMR9vc3CQAnJ6eDu1viN9K6g7T3mN8QAAAAABJRU5ErkJggg),no-repeat;
	}
	#myBtn:hover {
		background-color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
		/* rgba( 22, 122, 208, 1 ) var(--ACCENT-color) LightBlue */
	}
</style>

<script type="text/javascript">

	let mybutton = document.getElementById('myBtn');
	let elmnt = document.getElementById("R-body-inner");
	elmnt.style.scrollBehavior = 'smooth';

	function scrollFunction() {
		// probably deactivated/overwritten by perfect-scrollbar.js:
		// document.body.scrollTop, document.documentElement.scrollTop
		// let y = elmnt.scrollTop;
		// console.log(y);

		if (elmnt.scrollTop > 20 ) {
			mybutton.style.display = 'block';
		} else {
			mybutton.style.display = 'none';
		}
	}
	function topFunction() {
		elmnt.scrollTop = 0; // for Safari
		// document.documentElement.scrollTop = 0; // for Chrome, Firefox, IE and Opera
	}
	
	// window.onscroll = function() {scrollFunction()};
	// the following works:
	window.addEventListener('scroll', function() {
		scrollFunction();
	}, true);

</script>

<!-- scroll to top -->

Don't blame me for the mimencoded icon, this of course can be changed easily.
It actually works with the current 6.0.0 release.