diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue index 2cebde0b6..b1a75f896 100644 --- a/webapp/components/Comment.vue +++ b/webapp/components/Comment.vue @@ -79,8 +79,10 @@ import ContentMenu from '~/components/ContentMenu' import ContentViewer from '~/components/Editor/ContentViewer' import HcCommentForm from '~/components/CommentForm/CommentForm' import CommentMutations from '~/graphql/CommentMutations' +import scrollToAnchor from '~/mixins/scrollToAnchor.js' export default { + mixins: [scrollToAnchor], data: function() { return { isCollapsed: true, diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js index 3e77d84fb..460f1a4ea 100644 --- a/webapp/components/CommentList/CommentList.spec.js +++ b/webapp/components/CommentList/CommentList.spec.js @@ -50,9 +50,6 @@ describe('CommentList.vue', () => { }, }, }, - $route: { - hash: '', - }, } stubs = { EditorContent: "
", diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue index b5eb070c8..2013140c1 100644 --- a/webapp/components/CommentList/CommentList.vue +++ b/webapp/components/CommentList/CommentList.vue @@ -32,8 +32,10 @@ diff --git a/webapp/mixins/scrollToAnchor.js b/webapp/mixins/scrollToAnchor.js new file mode 100644 index 000000000..e68658f07 --- /dev/null +++ b/webapp/mixins/scrollToAnchor.js @@ -0,0 +1,32 @@ +export function scrollToAnchor(anchor) { + if (!anchor) return + if (!window || !document) { + return + } + const container = document.querySelector(anchor) + if (container) { + const { top } = container.getBoundingClientRect() + setTimeout(() => { + // we have to set a small timeout to ensure this part comes after nuxt + // scrollBehaviour: https://nuxtjs.org/api/configuration-router/#scrollbehavior + window.scroll({ + top, + left: 0, + behavior: 'smooth', + }) + }, 250) + } +} + +export default { + watch: { + $route(to, from) { + const anchor = to && to.hash + scrollToAnchor(anchor) + }, + }, + mounted() { + const anchor = this.$route && this.$route.hash + scrollToAnchor(anchor) + }, +}