Detachable scrollTop button

src/components/scroll_top_button/scroll_top_button.js

@@ -0,0 +1,18 @@
+const ScrollTopButton = {
+  props: {
+    fast: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  methods: {
+    scrollToTop() {
+      const speed = this.fast ? 'instant' : 'smooth';
+
+      window.scrollTo({ top: 0, behavior: speed })
+    }
+  }
+}
+
+export default ScrollTopButton

src/components/scroll_top_button/scroll_top_button.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="rightside-button scroll-to-top">
+    <button
+      class="button-unstyled scroll-to-top-button"
+      type="button"
+      :title="$t('general.scroll_to_top')"
+      @click="scrollToTop"
+    >
+      <FALayers class="fa-scale-110 fa-old-padding-layer">
+        <FAIcon icon="arrow-up" />
+        <FAIcon
+          icon="minus"
+          transform="up-7"
+        />
+      </FALayers>
+    </button>
+  </div>
+</template>
+
+<script src="./scroll_top_button.js"></script>
+<style lang="scss">
+.scroll-to-top {
+  display: none;
+}
+
+.-scrolled .scroll-to-top {
+  display: inline-block;
+}
+</style>

src/components/timeline/timeline.js

@@ -5,6 +5,7 @@ import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
+import ScrollTopButton from '../scroll_top_button/scroll_top_button.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
@@ -47,6 +48,7 @@ const Timeline = {
   },
   components: {
     Status,
+    ScrollTopButton,
     Conversation,
     TimelineMenu,
     QuickFilterSettings,
@@ -144,9 +146,6 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
-    scrollToTop () {
-      window.scrollTo({ top: this.$el.offsetTop })
-    },
     stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
     }, 1000),
@@ -251,7 +250,6 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
-      this.showScrollTop = this.$el.offsetTop < window.scrollY
       this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),

src/components/timeline/timeline.vue

@@ -8,25 +8,7 @@
         v-if="!embedded"
         :timeline-name="timelineName"
       />
-      <div
-        v-if="showScrollTop"
-        class="rightside-button"
-      >
-        <button
-          class="button-unstyled scroll-to-top-button"
-          type="button"
-          :title="$t('general.scroll_to_top')"
-          @click="scrollToTop"
-        >
-          <FALayers class="fa-scale-110 fa-old-padding-layer">
-            <FAIcon icon="arrow-up" />
-            <FAIcon
-              icon="minus"
-              transform="up-7"
-            />
-          </FALayers>
-        </button>
-      </div>
+      <ScrollTopButton />
       <template v-if="mobileLayout">
         <div
           v-if="showLoadButton"