Scroll to top

src/lib/components/Header.svelte

@@ -2,7 +2,7 @@
 	import copy from '../../data/copy.json';
 </script>
 
-<section class="content title section" style:background-image={"url('images/fiat_2024_banner_background_new.jpg')"}>
+<section class="content title section" id="top" style:background-image={"url('images/fiat_2024_banner_background_new.jpg')"}>
 	<div class="container has-text-centered">
 		<div class="logos">
 			<a href="https://www.atlanticcouncil.org"

src/lib/components/Legend.svelte

@@ -27,7 +27,6 @@
     }
 
     function handleMouseOver(event, id) {
-        console.log(id)
 		showLegendTooltip = true;
 		tooltipX = event.clientX;
 		tooltipY = event.clientY;

src/lib/components/ToTop.svelte

@@ -0,0 +1,63 @@
+<script>
+    // back to top
+    import { fly } from 'svelte/transition';
+    import { scrollTo } from '../utils/misc';
+  
+    let show = false;
+  
+    function handleScroll() {
+      if (window.scrollY > window.innerHeight) {
+        show = true;
+      } else {
+        show = false;
+      }
+    }
+  
+    function handleSpanClick(id) {
+      scrollTo(id);
+    }
+  </script>
+  
+  <svelte:window on:scroll={handleScroll}></svelte:window>
+  
+  {#if (show)}
+    <div class="to-top" transition:fly={{duration: 400, y: 100}}>
+      <span class="pseudolink" on:click={() => handleSpanClick('top')}>To Top</span>
+    </div>
+  {/if}
+  
+  <style>
+    .to-top {
+      padding: 0.7rem;
+      font-family: var(--font-02);
+      font-size: 0.9rem;
+      background-color: var(--transparentbg);
+      border-top: 2px solid var(--usa-lightblue);
+      border-left: 2px solid var(--usa-lightblue);
+      border-right: 2px solid var(--usa-lightblue);
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+      position: fixed;
+      z-index: 1000001;
+      bottom: 0;
+      right: 1rem;
+    }
+  
+    span {
+      display: block;
+      margin: 0.2rem auto;
+      text-align: center;
+    }
+
+    span.pseudolink {
+        color: var(--usa-blue);
+        text-decoration: underline;
+        cursor: pointer;
+        transition: all 200ms ease;
+      }
+      
+     span.pseudolink:hover {
+        color: var(--usa-lightblue);
+      }
+  </style>
+  

src/lib/utils/misc.js

@@ -54,4 +54,12 @@ export const includesTextSearch = (filter, s) => {
   return filterArr.some((f) => {
     return s.indexOf(f) > -1;
   });
+};
+
+// scroll-to function (also set on window to make it available outside svelte)
+export const scrollTo = (targetId) => {
+  setTimeout(() => {
+    document.getElementById(targetId).scrollIntoView({behavior: 'smooth'});
+  }, 200);
+  return(false);
 };

src/routes/+page.svelte

@@ -13,6 +13,7 @@
 	import AnimatedFilterIcon from '$lib/components/AnimatedFilterIcon.svelte';
 	import Collapsible from '$lib/components/Collapsible.svelte';
 	import CasesControls from '$lib/components/CasesControls.svelte';
+	import ToTop from '$lib/components/ToTop.svelte';
 	import { splitString, haveOverlap, withinRange, includesTextSearch } from '$lib/utils/misc';
 	//import { setScales } from '$lib/utils/scales';
 	import { page } from '$app/stores';
@@ -236,6 +237,8 @@
 	<meta property="og:locale" content="en_US" />
 </svelte:head>
 
+<ToTop />
+
 {#if isMobile && !modalOpen}
 	<div class="filter-button">
 		<button on:click={() => toggleSidebar()}