diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts
index 58ffb026ab32..6868e9738923 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts
@@ -29,41 +29,6 @@ import gridCoreUtils from '../m_utils';
 import type { VirtualScrollController } from '../virtual_scrolling/m_virtual_scrolling_core';
 import { DataHelperMixin } from './m_data_helper_mixin';
 
-const changePaging = function (that, optionName, value) {
-  const dataSource = that._dataSource;
-
-  if (dataSource) {
-    if (value !== undefined) {
-      const oldValue = that._getPagingOptionValue(optionName);
-      if (oldValue !== value) {
-        if (optionName === 'pageSize') {
-          dataSource.pageIndex(0);
-        }
-        dataSource[optionName](value);
-
-        that._skipProcessingPagingChange = true;
-        that.option(`paging.${optionName}`, value);
-        that._skipProcessingPagingChange = false;
-        const pageIndex = dataSource.pageIndex();
-        that._isPaging = optionName === 'pageIndex';
-        return dataSource[optionName === 'pageIndex' ? 'load' : 'reload']()
-          .done(() => {
-            that._isPaging = false;
-            that.pageChanged.fire(pageIndex);
-          });
-      }
-      return Deferred().resolve().promise();
-    }
-    return dataSource[optionName]();
-  }
-
-  if (optionName === 'pageIndex' && value !== undefined) {
-    return Deferred().resolve().promise();
-  }
-
-  return 0;
-};
-
 interface HandleDataChangedArguments {
   changeType?: 'refresh' | 'update' | 'loadError';
   isDelayed?: boolean;
@@ -110,7 +75,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {
 
   protected _changes!: any[];
 
-  private readonly _skipProcessingPagingChange: boolean | undefined;
+  private _skipProcessingPagingChange: boolean | undefined;
 
   private _useSortingGroupingFromColumns: boolean | undefined;
 
@@ -1598,15 +1563,51 @@ export class DataController extends DataHelperMixin(modules.Controller) {
     return result;
   }
 
+  protected changePaging(optionName, value) {
+    const dataSource = this._dataSource;
+
+    if (dataSource) {
+      if (value !== undefined) {
+        const oldValue = this._getPagingOptionValue(optionName);
+        if (oldValue !== value) {
+          if (optionName === 'pageSize') {
+            dataSource.pageIndex(0);
+          }
+          dataSource[optionName](value);
+
+          this._skipProcessingPagingChange = true;
+          // @ts-expect-error
+          this.option(`paging.${optionName}`, value);
+          this._skipProcessingPagingChange = false;
+          const pageIndex = dataSource.pageIndex();
+          this._isPaging = optionName === 'pageIndex';
+          return dataSource[optionName === 'pageIndex' ? 'load' : 'reload']()
+            .done(() => {
+              this._isPaging = false;
+              this.pageChanged.fire(pageIndex);
+            });
+        }
+        return Deferred().resolve().promise();
+      }
+      return dataSource[optionName]();
+    }
+
+    if (optionName === 'pageIndex' && value !== undefined) {
+      return Deferred().resolve().promise();
+    }
+
+    return 0;
+  }
+
   /**
    * @extended: virtual_scrolling
    */
   public pageIndex(value?) {
-    return changePaging(this, 'pageIndex', value);
+    return this.changePaging('pageIndex', value);
   }
 
   public pageSize(value?) {
-    return changePaging(this, 'pageSize', value);
+    return this.changePaging('pageSize', value);
   }
 
   private beginCustomLoading(messageText) {
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
index e4253eea2839..8a30d0bd060e 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
@@ -462,6 +462,32 @@ export const data = (Base: ModuleType<DataController>) => class VirtualScrolling
 
   private _itemCount: any;
 
+  protected changePaging(optionName, value) {
+    if (value !== undefined && (isVirtualMode(this) || isAppendMode(this))) {
+      let scrollPosition = 0;
+      const pageSize = this._dataSource.pageSize() ?? 0;
+      const itemSize = this
+        .getItemSize();
+      const itemSizes = this
+        .getItemSizes();
+      const pageIndex = optionName === 'pageIndex' ? value : 0;
+      const itemIndex = pageIndex * pageSize;
+
+      scrollPosition = itemIndex * itemSize;
+
+      for (const index in itemSizes) {
+        // eslint-disable-next-line radix
+        if (parseInt(index) < itemIndex) {
+          scrollPosition += itemSizes[index] - itemSize;
+        }
+      }
+
+      this._rowsScrollController?.setViewportItemIndexByScrollPosition(scrollPosition);
+    }
+
+    return super.changePaging(optionName, value);
+  }
+
   public dispose() {
     const rowsScrollController = this._rowsScrollController;
 
diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling_core.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling_core.ts
index 6126c458ccc9..247cc266eac4 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling_core.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling_core.ts
@@ -266,6 +266,14 @@ class VirtualScrollController {
     return this._isScrollingBack;
   }
 
+  public setViewportItemIndexByScrollPosition(position) {
+    this._position = position;
+
+    const itemIndex = this.getItemIndexByPosition();
+
+    this.setViewportItemIndex(itemIndex);
+  }
+
   private _setViewportPositionCore(position) {
     const prevPosition = this._position || 0;
     this._position = position;
diff --git a/packages/devextreme/playground/T1220800_1.html b/packages/devextreme/playground/T1220800_1.html
new file mode 100644
index 000000000000..f24876176ca2
--- /dev/null
+++ b/packages/devextreme/playground/T1220800_1.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>DevExtreme jQuery Example</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <script type="text/javascript">
+        const currentThemeId = localStorage.getItem("currentThemeId") || "light";
+
+        const link = document.createElement("link");
+        link.href = `../artifacts/css/dx.${currentThemeId}.css`;
+        link.type = "text/css";
+        link.rel = "stylesheet";
+
+        document.getElementsByTagName("head")[0].appendChild(link);
+    </script>
+
+    <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
+    <!-- HtmlEditor -->
+    <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
+
+    <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/message.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/number.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->
+
+    <!--
+    <script type="text/javascript" src="../artifacts/js/exceljs.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jspdf.umd.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
+    -->
+
+    <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+    <script type="text/javascript" src="./themeSelector.js"></script>
+    <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@3.0.0/js/dx.aspnet.data.js"></script>
+</head>
+<body class="dx-surface">
+    <div role="main">
+        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
+
+        <select id="theme-selector" style="display: block;">
+        </select>
+        <br />
+        <div id="btn"></div>
+        <div id="gridContainer">
+        <script>
+$(() => {
+  $('#btn').dxButton({
+    text: 'test',
+    onClick() {
+      grid.navigateToRow(10021).then(() => {
+        grid.selectRows([10021], false);
+      });
+    }
+  })
+  
+  var grid = $('#gridContainer').dxDataGrid({
+    dataSource: DevExpress.data.AspNet.createStore({
+      key: 'Id',
+      loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales',
+    }),
+    width: 900,
+    height: 300,
+    selection: { mode: 'multiple' },
+		searchPanel: { visible: true },
+    remoteOperations: true,
+    scrolling: {
+      mode: 'virtual',
+      rowRenderingMode: 'virtual',
+    },
+    paging: {
+      pageSize: 20,
+    },
+    headerFilter: {
+      visible: true,
+      search: {
+        enabled: true,
+      },
+    },
+    wordWrapEnabled: true,
+    showBorders: true,
+    columns: [{
+      dataField: 'Id',
+      width: 90,
+    }, {
+      caption: 'Store',
+      dataField: 'StoreName',
+      width: 150,
+    }, {
+      caption: 'Category',
+      dataField: 'ProductCategoryName',
+      width: 120,
+    }, {
+      caption: 'Product',
+      dataField: 'ProductName',
+    }, {
+      caption: 'Date',
+      dataField: 'DateKey',
+      dataType: 'date',
+      format: 'yyyy-MM-dd',
+      width: 110,
+    }, {
+      caption: 'Amount',
+      dataField: 'SalesAmount',
+      format: 'currency',
+      headerFilter: {
+        groupInterval: 1000,
+      },
+      width: 100,
+    }],
+  }).dxDataGrid('instance');
+});
+
+        </script>
+    </div>
+</body>
+</html>
diff --git a/packages/devextreme/playground/T1220800_2.html b/packages/devextreme/playground/T1220800_2.html
new file mode 100644
index 000000000000..d52e1b8e10ac
--- /dev/null
+++ b/packages/devextreme/playground/T1220800_2.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>DevExtreme jQuery Example</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <script type="text/javascript">
+        const currentThemeId = localStorage.getItem("currentThemeId") || "light";
+
+        const link = document.createElement("link");
+        link.href = `../artifacts/css/dx.${currentThemeId}.css`;
+        link.type = "text/css";
+        link.rel = "stylesheet";
+
+        document.getElementsByTagName("head")[0].appendChild(link);
+    </script>
+
+    <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
+    <!-- HtmlEditor -->
+    <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
+
+    <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/message.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/number.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->
+
+    <!--
+    <script type="text/javascript" src="../artifacts/js/exceljs.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jspdf.umd.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
+    -->
+
+    <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+    <script type="text/javascript" src="./themeSelector.js"></script>
+    <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@3.0.0/js/dx.aspnet.data.js"></script>
+</head>
+<body class="dx-surface">
+    <div role="main">
+        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
+
+        <select id="theme-selector" style="display: block;">
+        </select>
+        <br />
+        <div id="numberbox"></div>
+        <div id="btn"></div>
+        <div id="gridContainer"></div>
+        <script>
+ $(() => {
+  const pageSize = 20;
+  const grid = $('#gridContainer').dxDataGrid({
+    dataSource: DevExpress.data.AspNet.createStore({
+      key: 'Id',
+      loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales',
+    }),
+    width: 900,
+    height: 300,
+    selection: { mode: 'multiple' },
+		searchPanel: { visible: true },
+    remoteOperations: true,
+    scrolling: {
+      mode: 'virtual',
+      useNative: false,
+    },
+    paging: {
+      pageSize,
+    },
+    headerFilter: {
+      visible: true,
+      search: {
+        enabled: true,
+      },
+    },
+    wordWrapEnabled: true,
+    showBorders: true,
+    columns: [{
+      dataField: 'Id',
+      width: 90,
+    }, {
+      caption: 'Store',
+      dataField: 'StoreName',
+      width: 150,
+    }, {
+      caption: 'Category',
+      dataField: 'ProductCategoryName',
+      width: 120,
+    }, {
+      caption: 'Product',
+      dataField: 'ProductName',
+    }, {
+      caption: 'Date',
+      dataField: 'DateKey',
+      dataType: 'date',
+      format: 'yyyy-MM-dd',
+      width: 110,
+    }, {
+      caption: 'Amount',
+      dataField: 'SalesAmount',
+      format: 'currency',
+      headerFilter: {
+        groupInterval: 1000,
+      },
+      width: 100,
+    }],
+  }).dxDataGrid('instance');
+
+  var numberbox = $('#numberbox').dxNumberBox({
+    value: 61
+  }).dxNumberBox('instance');
+   
+  $('#btn').dxButton({
+    text: `Select record`,
+    onClick() {
+      const key = numberbox.option('value');
+      const pageIndex = key/pageSize - 1;
+      grid.pageIndex(pageIndex).then(() => {
+        grid.navigateToRow(key).then(() => {
+          grid.selectRows([key], false);
+        });
+      });
+    }
+  })
+});
+        </script>
+    </div>
+</body>
+</html>
diff --git a/packages/devextreme/playground/T1267691.html b/packages/devextreme/playground/T1267691.html
new file mode 100644
index 000000000000..c381869d4668
--- /dev/null
+++ b/packages/devextreme/playground/T1267691.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>DevExtreme jQuery Example</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <script type="text/javascript">
+        const currentThemeId = localStorage.getItem("currentThemeId") || "light";
+
+        const link = document.createElement("link");
+        link.href = `../artifacts/css/dx.${currentThemeId}.css`;
+        link.type = "text/css";
+        link.rel = "stylesheet";
+
+        document.getElementsByTagName("head")[0].appendChild(link);
+    </script>
+
+    <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
+    <!-- HtmlEditor -->
+    <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
+
+    <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/message.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/number.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
+    <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->
+
+    <!--
+    <script type="text/javascript" src="../artifacts/js/exceljs.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jspdf.umd.min.js"></script>
+    <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
+    -->
+
+    <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
+    <script type="text/javascript" src="./themeSelector.js"></script>
+    <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@4.0.2/js/dx.aspnet.data.js"></script>
+    <style>
+        #gridContainer {
+  height: 440px;
+}
+
+    </style>
+</head>
+<body class="dx-surface">
+    <div role="main">
+        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
+
+        <select id="theme-selector" style="display: block;">
+        </select>
+        <br />
+
+        <div id="btn"></div>
+        <br/><br/>
+        <div id="gridContainer"></div>
+        <script>
+$(() => {
+  $('#btn').dxButton({
+    text: 'Scroll grid',
+    onClick: function() {
+      $('#gridContainer').dxDataGrid('instance').getScrollable().scrollTo({
+        y: 5000000
+      });
+    }
+  });
+
+  $('#gridContainer').dxDataGrid({
+    editing: {
+    	mode: "row",
+    	allowAdding: true,
+        newRowPosition: "first"
+  	},
+    dataSource: DevExpress.data.AspNet.createStore({
+      key: 'Id',
+      loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales',
+    }),
+    paging: {
+      pageSize: 35
+    },
+    remoteOperations: true,
+    scrolling: {
+      mode: 'virtual',
+      //legacyMode: true,
+    },
+    showBorders: true,
+    columns: [{
+      dataField: 'Id',
+      width: 90,
+    }, {
+      caption: 'Store',
+      dataField: 'StoreName',
+      width: 150,
+    }, {
+      caption: 'Category',
+      dataField: 'ProductCategoryName',
+      width: 120,
+    }, {
+      caption: 'Product',
+      dataField: 'ProductName',
+    }, {
+      caption: 'Date',
+      dataField: 'DateKey',
+      dataType: 'date',
+      format: 'yyyy-MM-dd',
+      width: 110,
+    }, {
+      caption: 'Amount',
+      dataField: 'SalesAmount',
+      format: 'currency',
+      headerFilter: {
+        groupInterval: 1000,
+      },
+      width: 100,
+    }],
+  });
+});
+
+        </script>
+    </div>
+</body>
+</html>