Add scroll up button to website (#9186)

Co-authored-by: Florian Bischof <design.falke@gmail.com>

docs/_layouts/v2.html

@@ -126,6 +126,12 @@
 	  <a class="ext-link github" href="http://github.com/Leaflet/Leaflet" title="View Source on GitHub"><img alt="View Source on GitHub" src="{{root}}docs/images/github-round.svg" width="46" /></a>
 	  <a class="ext-link forum" href="https://stackoverflow.com/questions/tagged/leaflet" title="Ask for help on Stack Overflow"><img alt="Leaflet questions on Stack Overflow" src="{{root}}docs/images/forum-round.svg" width="46" /></a>
 	</nav>
+
+	<button id="back-to-top" title="Scroll back to top">
+		<svg viewBox="0 0 16 16">
+			<path d="M7.3,3.3c0.4-0.4,1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4s-1,0.4-1.4,0L8,5.4l-5.3,5.3c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4L7.3,3.3L7.3,3.3z"/>
+		</svg>
+	</button>
 </footer>
 
 <script>

docs/docs/css/main.css

@@ -142,11 +142,57 @@ h4 {
 	padding: 0 6em 1.5em;
 	margin: 0 auto;
 }
+
 .footer {
 	margin-top: 50px;
 	color: #777;
 }
 
+#back-to-top {
+	position: fixed;
+	z-index: 400;
+	right: 1.5em;
+	bottom: 1.5em;
+	width: 46px;
+	height: 46px;
+	border: none;
+	border-radius: 50%;
+	background-color: #eee;
+	box-shadow: rgba(14, 15, 15, 0.3) 0px 2px 10px 0px;
+	opacity: 0;
+	visibility: hidden;
+	-webkit-transform: translateY(15px);
+	transform: translateY(15px);
+	-webkit-transition: 0.2s all;
+	transition: 0.2s all;
+	cursor: pointer;
+}
+
+#back-to-top svg {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	height: 50%;
+	width: 50%;
+	fill: #666;
+}
+
+#back-to-top:hover {
+	background-color: #eaffea;
+}
+
+#back-to-top:hover svg {
+	fill: #160;
+}
+
+#back-to-top.is-visible {
+	opacity: 1;
+	visibility: visible;
+	-webkit-transform: translateY(0px);
+	transform: translateY(0px);
+}
 
 /* header */
 

docs/docs/js/docs.js

@@ -115,3 +115,25 @@ function scrollToHeader(elemHeader, sameAnchor) {
 	// apply the new anchor to the location url
 	currentAnchor = window.location.hash = `#${elemHeader.id}`;
 }
+
+const backToTop = document.querySelector('#back-to-top');
+backToTop.addEventListener('click', () => {
+	document.documentElement.scrollIntoView({behavior: 'smooth'});
+});
+
+let lastScrollY = window.scrollY;
+const scrollEventHandler = function scrollEventHandler() {
+	const {scrollY} = window;
+
+	if (scrollY !== 0 && scrollY < lastScrollY) {
+		backToTop.classList.add('is-visible');
+	} else {
+		backToTop.classList.remove('is-visible');
+	}
+
+	lastScrollY = scrollY;
+};
+
+window.addEventListener('scroll', () => {
+	scrollEventHandler();
+});