Scroll to a Conversation

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 the scrollToComments function from the following scrollToComments loadMoreComments tab. This variation of the scrollToComments 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>