Avoid route change scroll when clicking on links

sapper-noscroll here for the rescue, keeps the scroll position and loads the new page content

src/atoms/Button.svelte

@@ -2,6 +2,7 @@
     export let href = '#'
     export let type = 'a'
     export let text = ''
+    export let noScroll = null
 </script>
 
 {#if type === 'button'}
@@ -13,7 +14,7 @@
 </button>
 
 {:else}
-<a {href} class={$$props.class ? $$props.class : 'button'} on:click>
+<a {href} class={$$props.class ? $$props.class : 'button'} sapper-noscroll={noScroll} on:click>
     <slot></slot>
     <div class="text" data-text={text}>
         <span>{text}</span>

src/atoms/LinkChange.svelte

@@ -1,9 +1,10 @@
 <script>
     export let href = '#'
     export let text = ''
+    export let noScroll = null
 </script>
 
-<a href={href} class="link-change">
+<a href={href} class="link-change" sapper-noscroll={noScroll}>
     {text}
     <span class="icon">
         <slot></slot>

src/atoms/LinkTranslate.svelte

@@ -5,9 +5,10 @@
     export let text = ''
     export let target = null
     export let rel = null
+    export let noScroll = null
 </script>
 
-<a class="link-translate" {href} {target} {rel}>
+<a class="link-translate" {href} {target} {rel} sapper-noscroll={noScroll}>
     <slot />
     <div class="text" data-text={text}>
         <span>{text}</span>

src/molecules/Location.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="location" data-aos="location">
-    <a href="/location/{location.country.slug}/{location.slug}" rel="prefetch">
+    <a href="/location/{location.country.slug}/{location.slug}" rel="prefetch" sapper-noscroll>
         <img src={location.country.flag.full_url} alt="Flag of {location.country.name}">
         <div class="anim-mask mask-city">
             <h3 class="location__city">{location.name}</h3>

src/molecules/Photo.svelte

@@ -63,7 +63,7 @@
 
     <div class="photo__image wrap">
         <div class="align">
-            <a href={photoHref}>
+            <a href={photoHref} sapper-noscroll>
                 <picture class="photo__picture">
                     {#if layout === 'list'}
                     <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>

src/molecules/Switcher.svelte

@@ -22,7 +22,7 @@
 
 <div class="switcher {type}">
     <div class="switcher__text" class:empty={!location}>
-        <a href="/">
+        <a href="/" sapper-noscroll>
             {#if !location}
             <span class="top">Houses</span>
             <span class="bottom">
@@ -36,7 +36,7 @@
     </div>
 
     <div class="button-control button-control--dashed switcher__icon">
-        <a href="/choose">
+        <a href="/choose" sapper-noscroll>
             <IconGlobe
                 color={type.includes('side') ? '#333' : '#fff'}
                 width={type.includes('side') ? 18 : 24}

src/organisms/Footer.svelte

@@ -17,7 +17,7 @@
             <li>
                 <ul>
                     <li>
-                        <LinkTranslate href="/credits" text="Credits" rel="prefetch" />
+                        <LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll="true" />
                     </li>
                     {#if $site}
                     <li class="instagram">