@ReshmaK3 Cosmos Rules 1.0 will by default always scroll to the top of the content every time a vertical tab is clicked - this was done so that the content of the tab is visible instead of keeping the current scrolling position of the old tab.

Note that this is how Cosmos Rules behaves by default and this is not a bug - changing the scrolling position when clicking tab will have other unintended effects for the users. If a user is entering a complex form, he might not want to see this auto-scrolling behavior.

Here is a demo of the behavior you want to achieve

insert the following code in the UserWorkform HTML fragment

<script>
  pega.namespace("pega.ui.templatenav");
  pega.ui.templatenav.toggleLayoutGroupTab = function(sectionId, index) {
    var headerNode;
    if (index !== undefined) {
      headerNode = document.querySelector(".template-nav-content > .layout[data-lg-child-id='" + index +
                                          "'] > .header");
    } else {
      var els = document.querySelectorAll(".template-nav-content > .layout > .header");
      for (var i = 0; i < els.length; i++) {
        if (els[i].textContent.trim() === sectionId) {
          $(els[i]).click();
          break;
        }
      }
    }
    if (headerNode && headerNode.getAttribute("aria-selected") !== "true") {
      var workAreaScrollWrapper = headerNode.closest(".workarea-view-scroll-wrapper");
      if (workAreaScrollWrapper.closest(".workarea-flex") === null) {
        workAreaScrollWrapper = workAreaScrollWrapper.closest(".screen-layout-region-main");
      }
      if (workAreaScrollWrapper) {
        var bbox = headerNode.parentNode.parentNode.getBoundingClientRect();
        if (bbox.top + 400 > workAreaScrollWrapper.clientHeight) {
          setTimeout(function() {
           var bbox1 = document.querySelector(".template-nav-content").getBoundingClientRect();
           workAreaScrollWrapper.scrollTo({
              top: (workAreaScrollWrapper.scrollHeight - bbox1.height - 400),
              behavior: 'smooth'
            });
          }, 200);
        }
      }
      $(headerNode).click();
    }
  };
</script>

this JS function will override the core function called toggleLayoutGroupTab that is called when toggling vertical tabs. This code is present in the JS file 'pzpega-templatenav'. Most of the code must stay as is - the customization can be done in the lines inside the setTimeout function to change the position of the scroll

In this code, if the bottom position of the tab is 400px above the viewport height, the scroll will not be triggered - otherwise the code will scroll to this position.

The demo of the changes was done in 8.4.4 using Theme-Cosmos 01.01. The change was tested for screenflows and regular flow. It works with the Review or the TreeNavigation7 harness as a main page harness.

This function might have to change in Theme-Cosmos 2.0 and some of the changes done in the file 'pzpega-templatenav' will need to be re-applied when upgrading to Cosmos 2.0

Note that this code is delivered 'as is' - you are free to use it in your application but if you do, you need to understand what the code is doing and be able to maintain it - if you do not understand the code above, you should use the OOB functionality provided in Theme-Cosmos.