一种平滑滚动导航实现方法、装置、电子设备及存储介质制造方法及图纸

本发明专利技术公开了一种平滑滚动导航实现方法、装置、电子设备及存储介质，该方法包括：获取目标滚动位置，目标滚动位置为原始页面导航后的目标页面所在位置；通过文档对象模型获取原始页面的滚动参数；根据浏览器对象模型中的滚动函数及滚动参数，对原始页面进行页面滚动，直至滚动到目标滚动位置时停止滚动。本发明专利技术实施例通过文档对象模型DOM获取滚动参数，并基于BOM的滚动函数及滚动参数实现页面的平滑滚动，由于文档对象模型为通用是一种与平台和语言无关的应用程序接口，在各种web页面和移动端页面无论因为操作系统还是浏览器内核不同都不会出现不可用的情况，兼容性强，为用户实现页面平滑滚动导航提供了方便。现页面平滑滚动导航提供了方便。现页面平滑滚动导航提供了方便。

【技术实现步骤摘要】
一种平滑滚动导航实现方法、装置、电子设备及存储介质


[0001]本专利技术涉及互联网
，尤其涉及一种平滑滚动导航实现方法、装置、电子设备及存储介质。

技术介绍

[0002]现有的网页在使用时，会根据要求进行导航到目标内容。现有的网页的导航方法有四种，
[0003]一是通过html(hyper text markup language,超文本标记语言)的a标签的href(hypertext reference,指定超链接目标的URL)链接目标内容，当触发该该链接目标内容时，滚动框表现为立即滚动，使得滚动效果过于突兀。
[0004]二是通过CSS(ascading Style Sheets,层叠样式表)属性scroll
‑
behavior在根html元素中指定这个属性值为smooth实现一个滚动框的平滑滚动。浏览器兼容性情况如图1所示，从图1中可知浏览器IE(InternetExplorer)、Safari和移动端系统IOSSafari的兼容性最差。其中smooth
‑
scroll.js是一个插件，用于实现页面的平滑跳转。
[0005]三是通过js(javascript，即时编译型的编程语言)的Element接口的scrollIntoView()方法滚动元素的父容器，指定过渡动画behavior为smooth。Element.scrollIntoView方法浏览器兼容性如图2所示其中Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内，从图2可知浏览器IE(InternetExplorer)、Safari和移动端系统IOSSafari兼容性差。
[0006]四是通过js封装库jquery的animate({scrollTop:目标位置})方法创建自定义动画,滚动容器到指定的滚动条，实现平滑移动。animate()方法法执行CSS属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果，但这样的滚动方式前提需先引入一个js类库，从而增加了请求包体积负担。
[0007]可见，现有技术的浏览器的导航方法采用原生提供的js方法或css属性不仅存在浏览器兼容性较差的情况，而且其导航效果不佳的问题。
[0008]因此，现有技术还有待于改进和发展。

技术实现思路

[0009]鉴于上述现有技术的不足，本专利技术提供了一种平滑滚动导航实现方法、装置、电子设备及存储介质，旨在解决现有技术中浏览器的滚动导航方法存在浏览器兼容性较差的问题。
[0010]本专利技术的技术方案如下：
[0011]本专利技术第一实施例提供了一种平滑滚动导航实现方法，方法包括：
[0012]获取目标滚动位置，所述目标滚动位置为原始页面导航后的目标页面所在位置；
[0013]通过文档对象模型获取原始页面的滚动参数；
[0014]根据浏览器对象模型中的滚动函数及所述滚动参数，对所述原始页面进行页面滚动，直至滚动到所述目标滚动位置时停止滚动。
[0015]进一步地，获取目标滚动位置包括：
[0016]获取预先设定的目标滚动位置；
[0017]或是，获取目标元素，通过文档对象模型获取目标元素滚动位置，目标滚动位置为目标元素滚动位置。
[0018]进一步地，获取目标滚动位置还包括：
[0019]通过文档对象模型获取原始页面当前窗口的最大滚动值；
[0020]若目标滚动位置大于最大滚动值，则将目标滚动位置更新为最大滚动值。
[0021]进一步地，通过文档对象模型获取原始页面当前窗口的最大滚动值包括：
[0022]通过文档对象模型获取原始页面当前窗口的窗口高度和滚动条高度；
[0023]根据窗口高度和滚动条高度计算原始页面当前窗口的最大滚动值。
[0024]进一步地，通过文档对象模型获取原始页面的滚动参数包括：
[0025]通过文档对象模型获取当前原始页面滚动高度和滚动速度。
[0026]进一步地，根据浏览器对象模型中的滚动函数及滚动参数，对原始页面进行页面滚动，直至滚动到目标滚动位置时停止滚动包括：
[0027]根据当前滚动高度及目标滚动位置，计算当前滚动高度距离目标滚动位置的滚动距离；
[0028]若滚动距离大于预定值，则根据浏览器对象模型中的滚动函数及滚动速度，对原始页面进行页面滚动，直至滚动距离小于预定值；
[0029]若滚动距离小于预定值，则根据浏览器对象模型中的滚动函数及滚动速度，对原始页面进行页面滚动，直至滚动到目标滚动位置时停止滚动。
[0030]进一步地，若滚动距离大于预定值，则根据浏览器对象模型中的滚动函数及滚动速度，对原始页面进行页面滚动，直至滚动距离小于预定值包括：
[0031]若滚动距离大于预定值，则根据滚动速度计算当前时间片在原始页面滚动到的当前位置，根据浏览器对象模型中的滚动函数及滚动速度，对原始页面进行页面滚动到当前位置，生成中间页面，并根据当前位置更新当前滚动高度；
[0032]根据更新后的当前滚动高度、目标滚动位置计算更新后的滚动距离，判断更新后的滚动距离是否大于预定值，若更新后的滚动距离大于预定值，则根据浏览器对象模型中的滚动函数及滚动速度，对中间页面进行页面滚动，直至滚动距离小于预定值。
[0033]本专利技术的另一实施例提供了一种平滑滚动导航实现装置，装置包括：
[0034]目标滚动位置获取模块，用于获取目标滚动位置，目标滚动位置为原始页面导航后的目标页面所在位置；
[0035]滚动参数获取模块，用于通过文档对象模型获取原始页面的滚动参数；
[0036]滚动模块，用于根据浏览器对象模型中的滚动函数及滚动参数，对原始页面进行页面滚动，直至滚动到目标滚动位置时停止滚动。
[0037]本专利技术的另一实施例提供了一种电子设备，所述电子设备包括至少一个处理器；以及，
[0038]与所述至少一个处理器通信连接的存储器；其中，
[0039]所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的平滑滚动导航实现方法。
[0040]本专利技术的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的平滑滚动导航实现方法。
[0041]有益效果：本专利技术实施例通文档对象模型DOM获取滚动参数，根据浏览器对象模型BOM中的滚动函数根据滚动参数实现页面的平滑滚动，一方面，由于滚动参数是根据实际的可视窗口大小进行设置，使得页面导航位置更加精准，另一方面，由于文档对象模型为通用的标准编程接口，即一种与平台和语言无关的应用程序接口，使得各种web页面和移动端页面不因操作系统或者浏本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种平滑滚动导航实现方法,其特征在于,所述方法包括：获取目标滚动位置，所述目标滚动位置为原始页面导航后的目标页面所在位置；通过文档对象模型获取原始页面的滚动参数；根据浏览器对象模型中的滚动函数及所述滚动参数，对所述原始页面进行页面滚动，直至滚动到所述目标滚动位置时停止滚动。2.根据权利要求1所述的方法，其特征在于，所述获取目标滚动位置包括：获取预先设定的目标滚动位置；或是，获取目标元素，通过文档对象模型获取目标元素滚动位置，所述目标滚动位置为目标元素滚动位置。3.根据权利要求1或2所述的方法，其特征在于，所述获取目标滚动位置还包括：通过文档对象模型获取原始页面当前窗口的最大滚动值；若目标滚动位置大于所述最大滚动值，则将目标滚动位置更新为所述最大滚动值。4.根据权利要求3所述的方法，其特征在于，所述通过文档对象模型获取原始页面当前窗口的最大滚动值包括：通过文档对象模型获取原始页面当前窗口的窗口高度和滚动条高度；根据所述窗口高度和滚动条高度计算原始页面当前窗口的最大滚动值。5.根据权利要求1所述的方法，其特征在于，所述通过文档对象模型获取原始页面的滚动参数包括：通过文档对象模型获取原始页面的当前滚动高度和滚动速度。6.根据权利要求5所述的方法，其特征在于，所述根据浏览器对象模型中的滚动函数及所述滚动参数，对所述原始页面进行页面滚动，直至滚动到所述目标滚动位置时停止滚动包括：根据所述当前滚动高度及所述目标滚动位置，计算所述当前滚动高度距离目标滚动位置的滚动距离；若所述滚动距离大于预定值，则根据浏览器对象模型中的滚动函数及滚动速度，对所述原始页面进行页面滚动，直至所述滚动距离小于预定值；若所述滚动距离小于预定值，则根据浏览器对象模型中的滚动函数及滚动速度，对所述原始页面进行页面滚动，直至滚动到所述目标滚动位置时停止滚...

【专利技术属性】
技术研发人员：李天驰，孙悦，陈哲，
申请(专利权)人：深圳点猫科技有限公司，
类型：发明
国别省市：