Enable scrolling 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:

  1. Add the following scrollToComments function to a page containing a Conversation.
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'
        });
    }
};

  1. 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>


Did this page help you?