CODEWITHSUNDEEP
angularjsmaterial-designangularjs-ng-repeatangular-material
TBankston
TBankston

Reputation: 45

Scroll to top of md-virtual-repeat

I am trying to add a "scroll to top of page" button inside an md-virtual-repeat-container. I am currently using $anchorScroll. I have set the hash to a table head (I have tried setting the hash inside and outside of the repeat container) and the md-virtual-repeat is set to repeat the tr's. When the button is clicked the table only scrolls up one item and stops, it doesn't scroll all the way to the top. Any ideas?

I think it might be because the browser thinks it only needs to scroll up one td to reach the hash because that is what is shown in the DOM but in reality it needs to scroll more.

Thank you in advance!

    <md-virtual-repeat-container flex>
     <table>
      <thead id='scrollHash'>
       <tr><th></th><tr>
      </thead>
      <tbody>
       <tr md-virtual-repeat='data in repeatData'>
        <td></td>
      </tbody>
     </table>
    </md-virtual-repeat-container>
    <md-button class='md-fab' ng-click'$scope.gotoTop()'>Top</md-button>

Upvotes: 1

Views: 3394

Answers (1)

DieuNQ
DieuNQ

Reputation: 985

You can use md-top-index (read more here).

Try this:

In html:

<md-virtual-repeat-container md-top-index="topIndex">...</md-virtual-repeat-container>
<md-button class='md-fab' ng-click="gotoTop()">Top</md-button>

In controller:

$scope.gotoTop = function()
{
    $scope.topIndex = 0;
}

Code here.

Hope this help.

Upvotes: 2

Related Questions