ionic/angular 滚动到顶部

最新推荐文章于 2024-02-11 07:00:00 发布

lian&fei

最新推荐文章于 2024-02-11 07:00:00 发布

阅读量615

点赞数

分类专栏：前端开发文章标签：滚动到顶部

本文链接：https://blog.csdn.net/qq_23937989/article/details/84827269

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ionic/angular 滚动到顶部

1、ionic滚动到顶部

ionic使用 $ionicScrollDelegate服务
$ionicScrollDelegate的详细用法：http://www.ionic.wang/js_doc-index-id-30.html

   $scope.gotop = function(){
            //页面里的ion-scroll或ion-content都会滚到顶端.没有找到好的办法使单独一个ion-content滚到顶端.           
          setTimeout(function(){
               $ionicScrollDelegate.scrollTop(true);
           },1000)
     }

2、angular 滚动到顶部
angular封装成指令

  app.directive('goTop',function(){
            return{
                restrict:'E,A',
                link:function(scope,element,attr){
                    var e=$(element);
                   
                    $(window).scroll(function(){//滚动时触发 
                        if($(document).scrollTop()>300){ //获取滚动条到顶部的垂直高度,到相对顶部300px高度显示
                            e.fadeIn(300)
                        }else{
                            e.fadeOut(200);
                        }
                    });
        
                    //点击回到顶部
                    e.click(function(){
                         $(".top").animate({
                            scrollTop:0
                        },100)
                    })
                }
            }
  })