Scroll XML page using JavaScript

The article describes a solution for a Manual Task with the Grid Answer type that contains the page number required to scroll XML content using this page number.

Here is the preview from a Manual Task that contains a link with the page number used to click to get the page scrolled. For example, if a user clicks the page 5 link, the content gets scrolled to page 6 automatically.

The Grid Answer type contains the following default values in the JSON format:

Code example 1

{
"unknown_document_type_json": [{
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='1'>page 1</a>",
"page_number": "1",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='2'>page 2</a>",
"page_number": "2",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='3'>page 3</a>",
"page_number": "3",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='4'>page 4</a>",
"page_number": "4",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='5'>page 5</a>",
"page_number": "5",
"document_type": "Airway Bill"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='6'>page 6</a>",
"page_number": "6",
"document_type": "Airway Bill"
}]
}

Code example 2

 <script type="text/javascript">
  
   function goToByScroll(tabIndex, speed){
        var selector =".TodApp_wrapper div[data-current-page=\"" + tabIndex + "\"]";
        $('html').animate({scrollTop: $('.TodApp_wrapper').offset().top},speed);
        var scrollTo =  $(selector).position().top;
        $('.TodApp_wrapper').animate({scrollTop:scrollTo},speed);
    }
    
 $(window).load(function () {
    $('.linkSelectorFromGrid').each(function( i ) {
         $(this).click(function() { 
            event.preventDefault();
            goToByScroll("1",'fast');
            setTimeout(() => { goToByScroll($(this).attr("tabindex"),'slow'); }, 500);
        });
    });
 });
    
</script>
  

The TOD IE Manual Task contains the following settings for the Grid Answer type.