How can we implement page up and page down functionality in custom table of LWC?

Question

We have a custom table in LWC. We have a requirement if the user is at the top of the table (i.e at row 1) if he wants to see last record in table, there must be page down/up button with the help of it user will move directly at the bottom of the table(i.e at the last row). and if user is at last row then on click of that button he should move up directly at first row. we have a scroll bar that helps to scroll record by record. additionally we want this functionality.

HTML:
<template>
<div>
<table  class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
    <thead>
        <tr>                     
            <th>
                <a data-id="Name" onclick={sort}>
                    <div>Name
                        <lightning-icon icon-name="utility:arrowup" size="x-small" if:true={nameUpBool}></lightning-icon>
                        <lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={nameDWBool}></lightning-icon>
                    </div>
                    
                </a>
            </th>
            <th>
                <a data-id="Industry" onclick={sort}>
                    <div>Industry
                        <lightning-icon icon-name="utility:arrowup" size="x-small" if:true={ageUpBool}></lightning-icon>
                        <lightning-icon icon-name="utility:arrowdown" size="x-small" if:true={ageDWBool}></lightning-icon>
                    </div>
                </a>
            </th>
            <th>
                <div>AccountNumber</div>    
            </th>
            <th>
                <div>Rating</div>                            
            </th>
                <th>
                    <div>type</div>                        
            </th>
                <th>
                    <div>Phone</div>                        
            </th>
        </tr>
    </thead>
    <tbody>
        <template for:each={accountData} for:item="person">
            <tr class={person.rowSelected} key={person.Id} data-id={person.Id}>                
                <td key={person.Id}>                                
                    {person.Name}
                </td>
                <td key={person.Id}>
                    {person.Industry}
                </td>
                <td key={person.Id}>
                    {person.AccountNumber}
                </td>
                <td key={person.Id}>
                    {person.Rating}
                </td> 
                    <td key={person.Id}>
                    {person.type}
                </td>
                <td key={person.Id}>
                    {person.Phone}
                </td> 
            </tr>                                                                     
        </template>
    </tbody>
</table>

JS:
@track accountData = [];
@wire(fetchAccounts)
wiredData({ error, data }) {
  if (data) {
    this.accountData=data;
    console.log('Data===' +JSON.stringify(this.accountData));
  } else if (error) {
    console.error('Error:'+error);
  }
}

sortedDirection = 'asc';
sortedColumn;

nameUpBool;
nameDWBool;
ageUpBool;
ageDWBool;
sort(e) {
    this.nameUpBool = false;
    this.nameDWBool = false;
    this.ageUpBool = false;
    this.ageDWBool = false;

    let colName =e.currentTarget.dataset.id;
    console.log( 'Column Name is===' + colName );

    if(this.sortedColumn === e.currentTarget.dataset.id){
        this.sortedDirection = this.sortedDirection === 'asc' ? 'desc' : 'asc';
    }else{
        this.sortedDirection = 'asc';
    } 

    let reverse = this.sortedDirection === 'asc' ? 1 : -1;

    switch (colName) {

        case "Name":
        if ( this.sortedDirection == 'asc' ){
            this.nameUpBool = true;
            console.log('IN IF OF SWITCH');
        }  
        else{
            this.nameDWBool = true;
        }     
        break;

        case "Industry":
        if ( this.sortedDirection == 'asc' ){
            this.ageUpBool = true;
            console.log('IN IF OF SWITCH Industry***');
        }  
        else{
            this.ageDWBool = true;
        }     
        break;


    }

    
    let table = JSON.parse(JSON.stringify(this.accountData));
    table.sort((a,b) => {return a[e.currentTarget.dataset.id] > b[e.currentTarget.dataset.id] ? 1 * reverse : -1 * reverse});
    this.sortedColumn = e.currentTarget.dataset.id;        
    this.accountData = table;

}  

Answer 1

I have added a demo of how you can scroll to bottom and to the top. You need to give class to the table and class to the last row of your table. Based on these class you can scroll to top and bottom.

Check out a demo code.