Scroll to a Conversation
Help your users quickly find the comments of an article
On a long page of content, a user may struggle to locate the Conversation you have implemented on a page. A simple way to solve this issue is to create a function that scrolls to the Conversation on a page.
scrollToComments function
The following steps provide one solution for adding scrolling functionality to your page:
- Add the
scrollToComments
function from the following scrollToComments tab to a page containing a Conversation.
To allow a user to scroll the comments section and to view comments typically hidden behind a “Show more” call-to-action button, add thescrollToComments
function from the following scrollToComments loadMoreComments tab. This variation of thescrollToComments
function improves the user experience for engaged users without requiring the design of a page to show all comments by default.
scrollToComments = function scrollToComments(postId) {
var conversationElement = document.querySelector("[data-spotim-module=\"conversation\"][data-post-id=".concat(postId, "]"));
var conversationDefaultAreaElement = document.querySelector("[data-spot-im-module-default-area=\"conversation\"][data-post-id=".concat(postId, "]"));
var element = conversationElement || conversationDefaultAreaElement;
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
};
scrollToComments = function scrollToComments(postId) {
var conversationElement = document.querySelector("[data-spotim-module=\"conversation\"][data-post-id=".concat(postId, "]"));
var conversationDefaultAreaElement = document.querySelector("[data-spot-im-module-default-area=\"conversation\"][data-post-id=".concat(postId, "]"));
var element = conversationElement || conversationDefaultAreaElement;
element.dataset.loadMoreComments = true; // <-- add this line
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
};
- Attach the
scrollToComments
function to a page element. Replace{POST_ID}
with the post ID of the article.
<button onClick="scrollToComments('{POST_ID}')">Go to Comments</button>
Full code example
In the following code sample, the post ID is this-is-a-post
.
<button onClick="scrollToComments(this-is-a-post)">Go to Comments</button>
<script>
scrollToComments = function scrollToComments(postId) {
var conversationElement = document.querySelector("[data-spotim-module=\"conversation\"][data-post-id=".concat(postId, "]"));
var conversationDefaultAreaElement = document.querySelector("[data-spot-im-module-default-area=\"conversation\"][data-post-id=".concat(postId, "]"));
var element = conversationElement || conversationDefaultAreaElement;
if (element) {
element.scrollIntoView({
behavior: 'smooth'
});
}
};
</script>
Updated 8 months ago