[发明专利]一种平滑滚动导航实现方法、装置、电子设备及存储介质

说明书

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

技术领域

本发明涉及互联网技术领域，尤其涉及一种平滑滚动导航实现方法、装置、电子设备及存储介质。

背景技术

现有的网页在使用时，会根据要求进行导航到目标内容。现有的网页的导航方法有四种，

一是通过html(hyper text markup language,超文本标记语言)的a标签的href(hypertext reference,指定超链接目标的URL)链接目标内容，当触发该该链接目标内容时，滚动框表现为立即滚动，使得滚动效果过于突兀。

二是通过CSS(ascading Style Sheets,层叠样式表)属性scroll-behavior在根html元素中指定这个属性值为smooth实现一个滚动框的平滑滚动。浏览器兼容性情况如图1所示，从图1中可知浏览器IE(InternetExplorer)、Safari和移动端系统IOSSafari的兼容性最差。其中smooth-scroll.js是一个插件，用于实现页面的平滑跳转。

三是通过js(javascript，即时编译型的编程语言)的Element接口的scrollIntoView()方法滚动元素的父容器，指定过渡动画behavior为smooth。Element.scrollIntoView方法浏览器兼容性如图2所示其中Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内，从图2可知浏览器IE(InternetExplorer)、Safari和移动端系统IOSSafari兼容性差。

四是通过js封装库jquery的animate({scrollTop:目标位置})方法创建自定义动画,滚动容器到指定的滚动条，实现平滑移动。animate()方法法执行CSS属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果，但这样的滚动方式前提需先引入一个js类库，从而增加了请求包体积负担。

可见，现有技术的浏览器的导航方法采用原生提供的js方法或css属性不仅存在浏览器兼容性较差的情况，而且其导航效果不佳的问题。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明提供了一种平滑滚动导航实现方法、装置、电子设备及存储介质，旨在解决现有技术中浏览器的滚动导航方法存在浏览器兼容性较差的问题。

本发明的技术方案如下：

本发明第一实施例提供了一种平滑滚动导航实现方法，方法包括：

获取目标滚动位置，所述目标滚动位置为原始页面导航后的目标页面所在位置；

通过文档对象模型获取原始页面的滚动参数；

根据浏览器对象模型中的滚动函数及所述滚动参数，对所述原始页面进行页面滚动，直至滚动到所述目标滚动位置时停止滚动。

进一步地，获取目标滚动位置包括：

获取预先设定的目标滚动位置；