页面滚动条到一定高度后出现置顶按钮

来源：互联网发布：高通软件编辑：程序博客网时间：2024/05/17 22:20

移动端:

　　使用的框架是ionic和angular,因为是刚入行的菜鸟,所以ionic和angular也不是很熟练,这里便不深入解释.

　　ionic有一个标签<ion-content> 这个标签(我个人称为标签,因为挺像的)有一个属性on-scroll="",on-scroll,该方法的作用是,当滑动<ion-content>标签的内容时,会执行on-scroll的方法.所以我们可以通过这个方法获取页面滑动的高度为多少.

　　然后可以通过注入ionic的$ionicScrDelegate服务的getScorllPosition()方法获取到视图对象

　　getScorllPosition()方法　　返回: 对象 滚动到该视图的位置，具有以下属性：

{数值} left 从左侧到用户已滚动的距离(开始为 0)。
{数值} top 从顶部到用户已滚动的距离 (开始为 0).

　　(滑动100px == $ionicScrDelegate.getScorllPosition().top == 100)

　　所以整个功能的大致步骤为:

　　1,做一个顶置图标,用绝对定位定位到页面某处,然后使用ng-show='config.showTop'去隐藏该图标(因为使用的是angularjs),'config.showTop'为自定义的对象属性,初始化为false

　　2,新建一个方法,该方法用于获取视图所滑动的距离,该方法放在<ion-content>标签 <ion-content id="content" class="has-header" on-scroll="toTopScroll()">

　　3,当滑动距离大于某个数值的时候,config.showTop的值变成true,顶置图标就显示出来了,相反的,如果小于,就为false.

　　$scope.toTopScroll = function(){                        $scope.config.showTop = $ionicScrollDelegate.getScrollPosition().top>250?true:false.                    };

　　注意:1,有on-scroll属性的<ion-content>外面不能有<ion-pane>,否则获取不到视图滑动的距离值

　　　　 2,<ion-infinite-scroll>标签是必须有的,不然效果很难看.

　　PC端:

　　　　　pc端原理是一样的,但是使用的技术不同,使用的是JQuery的方法(可能有更好的,其实移动端也可以用JQuery完成.)

　　　　　原理就不说了,直接说区别吧,不同的区别只有两点:

　　　　　1,$(window).scroll() //当我们操作页面滚动时,会触发该方法 ,该方法内执行一个函数

　　　　　2,$(window).scrollTop() //可以获取滚动条的垂直位置

　　　　　其他的和移动端基本一样.

0 0