---
title: Infinite Scroll Results
slug: template-js/infinite-scroll-results
docTags: 
createdAt: 2022-09-13T15:00:26.000Z
---



By default Klevu Template JS contains elements for pagination and number of records per page.

This can easily be replaced with an Infinite Scroll using the [Configuration](docId\:eL9qchgzNERsiaeg_E-Lu) option to enable the `resultInfiniteScroll` module.

:::CodeblockTabs
JavaScript

```typescript
<!-- Add the following below the klevu.js core script include -->
<script type="text/javascript">
klevu({
      theme: {
        modules: {
         resultInfiniteScroll: {
           quickSearch: {
             enable: true
           },
           searchResultsPage: {
             enable: true
           },
           categoryPage: {
             enable: true
           }
         }
       }
     }
})
</script>
```
:::

See : An in-action example and the source code on the [Klevu CodeSandbox](https://codesandbox.io/s/infinite-scroll-with-productlist-limit-set-to-36-ob9eoo)



### Disabling Automated Scroll-To-Top

The Infinite Scroll activation loads the additional records to Template JS using Ajax style response. In some website themes, the newly loaded array will shift the user to the top of the page.

The same effect can be witnessed using the Template JS default pagination if the user is in mid-page view and selects an alternate pagination value.

The following  example will disable the `scrollToTop` behavior in these instances for both *landing* and *catnav* scope.

Please see :**&#x20;&#x20;**[After Template Render](docId\:MFgw_8vqSnPinyQs19KJQ) section for details on this method of Klevu JS overriding

```typescript
<!-- Add the following below the klevu.js core script include -->
<script type="text/javascript">
klevu.afterTemplateRender("landing,catnav", function(data, scope){

    document.body.style.minHeight = '0';
    const currentDocumentHeight = document.documentElement.scrollHeight;
    document.body.style.minHeight = '${currentDocumentHeight}px';

    scope.kScope.chains.events.keyUp.remove({name: "scrollToTop"});

});
</script>
```