add ScrollToTopButton to HistoryScrollList

client/src/components/History/HistoryScrollList.vue

@@ -21,6 +21,7 @@ import { HistoriesFilters } from "./HistoriesFilters";
 import TextSummary from "../Common/TextSummary.vue";
 import Heading from "@/components/Common/Heading.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
 type AdditionalOptions = "set-current" | "multi" | "center";
@@ -58,7 +59,7 @@ const validFilter = computed(() => props.filter && props.filter.length > 2);
 const allLoaded = computed(() => totalHistoryCount.value <= filtered.value.length);
 
 // check if we have scrolled to the top or bottom of the scrollable div
-const { arrived } = useAnimationFrameScroll(scrollableDiv);
+const { arrived, scrollTop } = useAnimationFrameScroll(scrollableDiv);
 const isScrollable = ref(false);
 useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
     isScrollable.value = scrollSize.height >= clientSize.height + 1;
@@ -157,6 +158,10 @@ function historyClicked(history: HistorySummary) {
     }
 }
 
+function scrollToTop() {
+    scrollableDiv.value?.scrollTo({ top: 0, behavior: "smooth" });
+}
+
 const router = useRouter();
 
 function setCurrentHistory(history: HistorySummary) {
@@ -325,6 +330,7 @@ async function loadMore(noScroll = false) {
                     </div>
                 </BListGroup>
             </div>
+            <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
         </div>
 
         <div :class="!isMultiviewPanel && 'd-flex flex-row mt-3'">

client/src/components/ToolsList/ScrollToTopButton.vue

@@ -35,6 +35,7 @@ export default {
     position: absolute;
     opacity: 0;
     transition: opacity 0.4s;
+    z-index: 1000;
 
     &.show {
         opacity: 1;