本公开的实施例公开了页面视口滑动的方法和装置。该方法的一具体实施方式包括：获取滚动的页面元素与页面顶部的第一距离；响应于检测到用户触发的返回页面顶部的操作，执行向上运动步骤：将所述第一距离按第一预定比例进行缩小，得到第二距离；将所述第一距离减去所述第二距离计算出所述页面元素运动后的第一目标位置；发所述页面元素向上运动到所述第一目标位置，并获取所述页面元素运动后与页面顶部的当前距离；若所述当前距离为0，则停止所述页面元素向上运动；若所述当前距离不为0，则将所述当前距离作为第一距离定时执行上述向上运动步骤。该实施方式实现了速度不断衰减的平滑运动效果，并解决了运动的低效问题。并解决了运动的低效问题。并解决了运动的低效问题。
【技术实现步骤摘要】
页面视口滑动的方法和装置
[0001]本公开的实施例涉及计算机
，具体涉及页面视口滑动的方法和装置。
技术介绍
[0002]现有技术中网页返回顶部通常有三种方法：1、固定速度的定时器运动，2、时间维度的定时器运动，3、浏览器现有的API。
[0003]现有技术无法保证运动时间精度。原因是定时器的第二个参数的延迟只能保证何时把运动函数加入到浏览器任务队列，而无法保证其是否可以立即被执行。当浏览器任务队列中还有其它任务时或者浏览器主线程忙碌时，运动函数就要等前面的任务执行完再执行，带来的问题就是看到的运动可能会有卡顿的现象，因此定时器无法保证运动的流畅性。
[0004]此外，现有技术的视觉体验较差，使用浏览器自带的页面滚动方法也容易出现浏览器不兼容的问题。
技术实现思路
[0005]本公开的实施例提出了页面视口滑动的方法和装置。
[0006]第一方面，本公开的实施例提供了一种页面视口滑动的方法，包括：获取滚动的页面元素与页面顶部的第一距离；响应于检测到用户触发的返回页面顶部的操作，执行向上运动步骤：将所述第一距离按第一预定比例进行缩小，得到第二距离；将所述第一距离减去所述第二距离计算出所述页面元素运动后的第一目标位置；触发所述页面元素向上运动到所述第一目标位置，并获取所述页面元素运动后与页面顶部的当前距离；若所述当前距离为0，则停止所述页面元素向上运动；若所述当前距离不为0，则将所述当前距离作为第一距离定时执行上述向上运动步骤。
[0007]在一些实施例中，所述定时执行上述向上运动步骤，包括：获取屏幕刷新频率；根据所述屏幕刷新频率确定执行上述向上运动步骤的时间间隔。
[0008]在一些实施例中，所述定时执行上述向上运动步骤，包括：基于浏览器的requestAnimationFrame计算执行上述向上运动步骤的时间间隔。
[0009]在一些实施例中，所述第一预定比例与所述第一距离成正比。
[0010]在一些实施例中，所述方法还包括：获取滚动的页面元素与页面底部的第三距离；响应于检测到用户触发的跳转页面底部的操作，执行向下运动步骤：将所述第三距离按第二预定比例进行缩小，得到第四距离；将所述第三距离减去所述第四距离计算出所述页面元素运动后的第二目标位置；触发所述页面元素向下运动到所述第二目标位置，并获取所述页面元素运动后与页面底部的当前距离；若所述页面元素与页面底部的当前距离为0，则停止所述页面元素向下运动；若所述页面元素与页面底部的当前距离不为0，则将所述页面元素与页面底部的当前距离作为第三距离定时执行上述向下运动步骤。
[0011]在一些实施例中，所述定时执行上述向下运动步骤，包括：获取屏幕刷新频率；根据所述屏幕刷新频率确定执行上述向下运动步骤的时间间隔。
[0012]在一些实施例中，所述定时执行上述向下运动步骤，包括：基于浏览器的requestAnimationFrame计算执行上述向下运动步骤的时间间隔。
[0013]在一些实施例中，所述第二预定比例与所述第三距离成正比。
[0014]第二方面，本公开的实施例提供了一种页面视口滑动的装置，包括：检测单元，被配置成获取滚动的页面元素与页面顶部的第一距离；移动单元，被配置成响应于检测到用户触发的返回页面顶部的操作，执行向上运动步骤：将所述第一距离按第一预定比例进行缩小，得到第二距离；将所述第一距离减去所述第二距离计算出所述页面元素运动后的第一目标位置；触发所述页面元素向上运动到所述第一目标位置，并获取所述页面元素运动后与页面顶部的当前距离；若所述当前距离为0，则停止所述页面元素向上运动；定时单元，被配置成若所述当前距离不为0，则将所述当前距离作为第一距离定时执行上述向上运动步骤。
[0015]在一些实施例中，所述定时单元进一步被配置成：获取屏幕刷新频率；根据所述屏幕刷新频率确定执行上述向上运动步骤的时间间隔。
[0016]在一些实施例中，所述定时单元进一步被配置成：基于浏览器的requestAnimationFrame计算执行上述向上运动步骤的时间间隔。
[0017]在一些实施例中，所述第一预定比例与所述第一距离成正比。
[0018]在一些实施例中，所述检测单元进一步被配置成获取滚动的页面元素与页面底部的第三距离。移动单元进一步被配置成：响应于检测到用户触发的跳转页面底部的操作，执行向下运动步骤：将所述第三距离按第二预定比例进行缩小，得到第四距离；将所述第三距离减去所述第四距离计算出所述页面元素运动后的第二目标位置；触发所述页面元素向下运动到所述第二目标位置，并获取所述页面元素运动后与页面底部的当前距离；若所述页面元素与页面底部的当前距离为0，则停止所述页面元素向下运动。定时单元进一步被配置成若所述页面元素与页面底部的当前距离不为0，则将所述页面元素与页面底部的当前距离作为第三距离定时执行上述向下运动步骤。
[0019]在一些实施例中，所述定时单元进一步被配置成：获取屏幕刷新频率；根据所述屏幕刷新频率确定执行上述向下运动步骤的时间间隔。
[0020]在一些实施例中，所述定时单元进一步被配置成：基于浏览器的requestAnimationFrame计算执行上述向下运动步骤的时间间隔。
[0021]在一些实施例中，所述第二预定比例与所述第三距离成正比。
[0022]第三方面，本公开的实施例提供了一种页面视口滑动的电子设备，包括：一个或多个处理器；存储装置，其上存储有一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如第一方面中任一项所述的方法。
[0023]第四方面，本公开的实施例提供了一种计算机可读介质，其上存储有计算机程序，其中，所述程序被处理器执行时实现如第一方面中任一项所述的方法。
[0024]本公开的实施例提供的页面视口滑动的方法和装置，通过动态计算每次运动距离来执行元素视口的滚动运动效果，实现了一种高效的、速度不断衰减的平滑运动效果，并解决了运动的低效问题和定时器运动的不稳定性。
附图说明
[0025]通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本公开的其它特征、目的和优点将会变得更明显：
[0026]图1是本公开的一个实施例可以应用于其中的示例性系统架构图；
[0027]图2是根据本公开的页面视口滑动的方法的一个实施例的流程图；
[0028]图3是根据本公开的页面视口滑动的方法的一个应用场景的示意图；
[0029]图4是根据本公开的页面视口滑动的方法的又一个实施例的流程图；
[0030]图5是根据本公开的页面视口滑动的方法的又一个实施例的应用场景的示意图；
[0031]图6是根据本公开的页面视口滑动的装置的一个实施例的结构示意图；
[0032]图7是适于用来实现本公开的实施例的电子设备的计算机系统的结构示意图。
具体实施方式
[0033]下面结合附图和实施例对本公开作本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种页面视口滑动的方法，包括：获取滚动的页面元素与页面顶部的第一距离；响应于检测到用户触发的返回页面顶部的操作，执行向上运动步骤：将所述第一距离按第一预定比例进行缩小，得到第二距离；将所述第一距离减去所述第二距离计算出所述页面元素运动后的第一目标位置；触发所述页面元素向上运动到所述第一目标位置，并获取所述页面元素运动后与页面顶部的当前距离；若所述当前距离为0，则停止所述页面元素向上运动；若所述当前距离不为0，则将所述当前距离作为第一距离定时执行上述向上运动步骤。2.根据权利要求1所述的方法，其中，所述定时执行上述向上运动步骤，包括：获取屏幕刷新频率；根据所述屏幕刷新频率确定执行上述向上运动步骤的时间间隔。3.根据权利要求1所述的方法，其中，所述定时执行上述向上运动步骤，包括：基于浏览器的requestAnimationFrame计算执行上述向上运动步骤的时间间隔。4.根据权利要求1所述的方法，其中，所述第一预定比例与所述第一距离成正比。5.根据权利要求1所述的方法，其中，所述方法还包括：获取滚动的页面元素与页面底部的第三距离；响应于检测到用户触发的跳转页面底部的操作，执行向下运动步骤：将所述第三距离按第二预定比例进行缩小，得到第四距离；将所述第三距离减去所述第四距离计算出所述页面元素运动后的第二目标位置；触发所述页面元素向下运动到所述第二目标位置，并获取所述页面元素运动后与页面底部的当前距离；若所述页面元素与页面底部的当前距离为0，则停止所述页面元素向下运动；若所述页面元素与页面底部的当前距离...
【专利技术属性】
技术研发人员：徐忠元，
申请(专利权)人：北京京东拓先科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。