Shrinking Material Floating Action Button



Could someone show how to make a shrinking Material-floating action button in Ionic (shrinks on scrolling Up and shows up on scrolling down) just like seen on the App “Vice Versa”?

Here is a codepen with FAB : FAB codepen

Can you help a bit please @WidawskiJ

Thanks in advance. :wink:


There you go @naveenkarippai1

Don’t hesitate if you have questions


Hi @WidawskiJ,

Thanks for the reply. It seems to work fine on codepen but not yet on my Project. I have custom CSS animations attached to FAB but from my understanding it shouldn’t affect shrinking effect.

I used “cta” on and added id=“cta” on md-button element after defining directive.


It shouldn’t indeed. Can you try and reproduce your issue? I won’t be able to help without seeing the bug


Hi @WidawskiJ,

It works fine on first time page load but when user navigates to another state and returns back to state where button is located ,it doesn’t shrink anymore.

On console I get this message on return page load : TypeError: el.attributes.candrag is undefined if (el.attributes.candrag.value){

Did you experience such an issue?

Thank you.


Hi Widaswski

May I know why I import the JS into the directive.js, The button appeared without icon and looks different.

Thank you

Best Regards


I achieve it by using getScrollPosition and ng-show/ng-hide with a little css for zoom…


May I get your full code? I am using the ionic, is that usefu? Thanks


I use floating-button from this link then use ng-hidefor that

<ion-floating-button ng-hide="!fabscrolling" href="#/messages" has-footer="false" button-color="#2AC9AA" icon="ion-chatbox" icon-color="#fff" class="view-button-chat">
    </ion-floating-button> {
  -webkit-animation: zoomOut .08s linear;
  animation: zoomOut .08s linear;
} {
  -webkit-animation: zoomOut .08s linear;
  animation: zoomOut .08s linear;

then in my controller:

$scope.scroll = function() {
        $timeout(function () {
            $scope.scrolling = true;
        scrollPositionfab = $ionicScrollDelegate.$getByHandle('memberOver').getScrollPosition().top;
        if (scrollPositionfab <= 10)
            $scope.fabscrolling = true;
        else {
            $scope.fabscrolling = false;

don’t forget to add delegate-handle=“memberOver” and on-scroll=“scroll()” in ion-content ex:

<ion-content padding="false" delegate-handle="memberOver" overflow-scroll="true" class="view-zerotop" on-scroll="scroll()">

PS: just use your preferred animations(I use animate.css for animation)


Thanks for your posting, but my ionic still cannot make it. If you don’t mind, please help me to check it.

Once again

Thank you

Best regards