Allow independent scrolling in split-column mode (#433)

src/nginxconfig/templates/app.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -59,7 +59,7 @@ THE SOFTWARE.
 
         <div class="main container" :style="{ display: ready ? undefined : 'none' }">
             <div class="columns is-multiline">
-                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
+                <div :class="`column ${splitColumn ? 'is-half column-scroll-y' : 'is-full'} is-full-touch`">
                     <h2>{{ $t('templates.app.perWebsiteConfig') }}</h2>
 
                     <div class="tabs">
@@ -96,7 +96,7 @@ THE SOFTWARE.
                     <Setup :data="{ domains: domains.filter(d => d !== null), global, confFiles }"></Setup>
                 </div>
 
-                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
+                <div :class="`column ${splitColumn ? 'is-half column-scroll-y' : 'is-full'} is-full-touch`">
                     <h2>{{ $t('templates.app.configFiles') }}</h2>
                     <div ref="files" class="columns is-multiline files">
                         <component

src/nginxconfig/templates/footer.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -28,7 +28,13 @@ THE SOFTWARE.
     <div class="footer">
         <div class="container">
             <p>
-                <a href="#top" class="button is-primary is-small">{{ $t('templates.footer.backToTop') }}</a>
+                <button
+                    type="button"
+                    class="button is-primary is-small"
+                    @click="handleScrollToTop"
+                >
+                    {{ $t('templates.footer.backToTop') }}
+                </button>
             </p>
             <p>
                 {{ $t('templates.footer.thisToolIs') }}
@@ -68,5 +74,13 @@ THE SOFTWARE.
         components: {
             ExternalLink,
         },
+        methods: {
+            handleScrollToTop: () => {
+                window.scrollTo({top: 0});
+
+                document.querySelectorAll('.column-scroll-y')
+                    .forEach(column => column.scrollTo({ top: 0 }));
+            },
+        },
     };
 </script>