How to scroll to md-card in md-content using jQuery animate?

Question

I have the following HTML code:

<body ng-app="MyApp">
    <div ng-controller="ctrl" layout="column" layout-fill ng-cloak>
    <md-sidenav class="md-sidenav-left" md-component-id="sidenav" md-disable-backdrop md-whiteframe="4">
        <md-toolbar class="md-theme-indigo">...</md-toolbar>
        <md-list></md-list>
    <md-sidenav>
    <div layout="column" flex>
        <md-content id="content">
            <div layout="column" flex>
                <md-card id="one" flex>…</md-card>
                <md-card id="two" flex>…</md-card>
                <!-- … -->
            </div>
        </md-content>
    </div>
</body>

I have tried to use this JS code but it doesn't work:

$scope.scrollTo = function(item) {
    $mdSidenav('sidenav').toggle();
    $('#home-content').animate({
        scrollTop: $(item).offset().top
        }, 'slow');
}

The item parameter is mc-card's id. I write the above code reading this question. scrollTo is called from buttons inside md-list-item.

Please add full code for html and js, are you sure it's a angular material code or just material ? — Raghvendra Kumar, May 16 '17 at 04:41
@RaghvendraKumar I updated my code but i can't add all code because is too big. — Mpac, May 16 '17 at 08:14
I still don't see 'home-content', 'item', 'scrollTo' in the html markup, let me know once you have provided all the missing pieces. — Raghvendra Kumar, May 16 '17 at 11:09

How to scroll to md-card in md-content using jQuery animate?

0 Answers0