页面导航的显示方法和装置、电子设备和存储介质

技术领域

本申请涉及计算机领域，尤其涉及一种页面导航的显示方法和装置、电子设备和存储介质。

背景技术

目前，用户可以通过查看页面中的页面内容查找自己感兴趣的内容。例如，在云产品(云技术产品)的产品页面中，一般没有产品导航(产品页组件导航)。在页面包含的产品数量较多的情况下，用户需要手动滚动页面寻找具体产品(页面内容)，页面内容的定位效率低，影响用户的使用体验。

部分云产品提供方的产品页面中包含有产品导航，产品导航位于产品页面靠上的一个位置，在当前位置超出屏幕窗口高度时，仍然需要用户手动滚动页面查找其他感兴趣的产品，仍然存在页面内容的定位效率低，影响用户的使用体验。

因此，相关技术中的页面导航的显示方式，存在页面适用性差、页面内容定位效率差的问题。

发明内容

本申请提供了一种页面导航的显示方法和装置、电子设备和存储介质，以至少解决相关技术中的页面导航的显示方式存在的页面适用性差、页面内容定位效率差的问题。

根据本申请实施例的一个方面，提供了一种页面导航的显示方法，包括：检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，所述目标页面包含多个组件和所述多个组件的目标导航条，所述目标导航条位于所述目标页面的导航条位置，所述第一触发操作用于触发调整所述目标页面在所述目标显示窗口内显示的页面位置；响应所述第一触发操作，将所述目标显示窗口内显示的页面位置调整为第一页面位置；在所述第一页面位置大于所述导航条位置的情况下，在所述目标显示窗口的第一窗口位置上显示所述目标导航条。

可选地，将所述目标显示窗口内显示的页面位置调整为所述第一页面位置包括：在所述第一触发操作为所述目标导航条上的第一导航项的选取操作的情况下，确定所述多个组件中与所述第一导航项匹配的第一组件的组件位置；按照所述第一组件的组件位置进行定位，将所述目标显示窗口上显示的页面位置调整为所述第一页面位置，其中，所述第一页面位置是由所述第一组件的组件位置所确定的位置。

可选地，按照所述第一组件的组件位置进行定位，将所述目标显示窗口上显示的页面位置调整为所述第一页面位置包括：将所述第一组件的组件位置与所述目标导航条的高度之间的差值，确定为所述第一页面位置；根据所述第一页面位置控制所述目标页面的滚动条在第一时长内进行滚动，以将所述目标显示窗口上显示的页面位置调整为所述第一页面位置。

可选地，将所述目标显示窗口内显示的页面位置调整为所述第一页面位置包括：在所述第一触发操作为所述目标页面的页面滚动操作的情况下，确定与所述页面滚动操作对应的页面滚动参数，其中，所述页面滚动参数用于控制所述目标页面的滚动条的滚动距离；按照所述页面滚动参数控制所述滚动条滚动第二滚动距离，以将所述目标显示窗口内显示的页面位置调整为所述第一页面位置。

可选地，在将所述目标显示窗口内显示的页面位置调整为所述第一页面位置之后，所述方法还包括：根据所述第一页面位置和所述多个组件中的每个组件的组件位置，从所述多个组件中获取与所述第一页面位置匹配的第二组件；将所述目标导航条上与所述第二组件匹配的第二导航项的显示状态更新为已选中状态。

可选地，在所述目标显示窗口的所述第一窗口位置上显示所述目标导航条之后，所述方法还包括：检测到对所述目标导航条所执行的位置调整操作，其中，所述位置调整操作用于将所述目标导航条在所述目标显示窗口上的显示位置调整为第二窗口位置；响应所述位置调整操作，在所述目标显示窗口的所述第二窗口位置上显示所述目标导航条。

可选地，在检测到对在所述目标显示窗口上显示的所述目标页面所执行的所述第一触发操作之后，所述方法还包括：检测到对所述目标页面所执行的第二触发操作，其中，所述第二触发操作用于触发调整所述目标页面在所述目标显示窗口内显示的页面位置；在所述第二触发操作与所述第一触发操作之间的时间间隔小于目标时间间隔的情况下，在与所述第一触发操作间隔所述目标时间间隔之后，响应所述第二触发操作，将所述目标显示窗口内显示的页面位置调整为第二页面位置。

根据本申请实施例的另一个方面，提供了一种页面导航的显示装置，包括：第一检测单元，用于检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，所述目标页面包含多个组件和所述多个组件的目标导航条，所述目标导航条位于所述目标页面的导航条位置，所述第一触发操作用于触发调整所述目标页面在所述目标显示窗口内显示的页面位置；第一调整单元，用于响应所述第一触发操作，将所述目标显示窗口内显示的页面位置调整为第一页面位置；第一显示单元，用于在所述第一页面位置大于所述导航条位置的情况下，在所述目标显示窗口的第一窗口位置上显示所述目标导航条。

可选地，所述第一调整单元包括：第一确定模块，用于在所述第一触发操作为所述目标导航条上的第一导航项的选取操作的情况下，确定所述多个组件中与所述第一导航项匹配的第一组件的组件位置；定位模块，用于按照所述第一组件的组件位置进行定位，将所述目标显示窗口上显示的页面位置调整为所述第一页面位置，其中，所述第一页面位置是由所述第一组件的组件位置所确定的位置。

可选地，所述第一调整模块包括：确定子模块，用于将所述第一组件的组件位置与所述目标导航条的高度之间的差值，确定为所述第一页面位置；控制子模块，用于根据所述第一页面位置控制所述目标页面的滚动条在第一时长内进行滚动，以将所述目标显示窗口上显示的页面位置调整为所述第一页面位置。

可选地，所述第一调整单元包括：第二确定模块，用于在所述第一触发操作为所述目标页面的页面滚动操作的情况下，确定与所述页面滚动操作对应的页面滚动参数，其中，所述页面滚动参数用于控制所述目标页面的滚动条的滚动距离；控制模块，用于按照所述页面滚动参数控制所述滚动条滚动第二滚动距离，以将所述目标显示窗口内显示的页面位置调整为所述第一页面位置。

可选地，所述装置还包括：匹配单元，用于在将所述目标显示窗口内显示的页面位置调整为所述第一页面位置之后，根据所述第一页面位置和所述多个组件中的每个组件的组件位置，从所述多个组件中获取与所述第一页面位置匹配的第二组件；更新单元，用于将所述目标导航条上与所述第二组件匹配的第二导航项的显示状态更新为已选中状态。

可选地，所述装置还包括：第二检测单元，用于在所述目标显示窗口的所述第一窗口位置上显示所述目标导航条之后，检测到对所述目标导航条所执行的位置调整操作，其中，所述位置调整操作用于将所述目标导航条在所述目标显示窗口上的显示位置调整为第二窗口位置；第二显示单元，用于响应所述位置调整操作，在所述目标显示窗口的所述第二窗口位置上显示所述目标导航条。

可选地，所述装置还包括：第三检测单元，用于在检测到对在所述目标显示窗口上显示的所述目标页面所执行的所述第一触发操作之后，检测到对所述目标页面所执行的第二触发操作，其中，所述第二触发操作用于触发调整所述目标页面在所述目标显示窗口内显示的页面位置；第二调整单元，用于在所述第二触发操作与所述第一触发操作之间的时间间隔小于目标时间间隔的情况下，在与所述第一触发操作间隔所述目标时间间隔之后，响应所述第二触发操作，将所述目标显示窗口内显示的页面位置调整为第二页面位置。

根据本申请实施例的又一个方面，还提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器、通信接口和存储器通过通信总线完成相互间的通信；其中，存储器，用于存储计算机程序；处理器，用于通过运行所述存储器上所存储的所述计算机程序来执行上述任一实施例中的方法步骤。

根据本申请实施例的又一个方面，还提供了一种计算机可读的存储介质，该存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一实施例中的方法步骤。

在本申请实施例中，采用按照显示窗口中所显示的页面位置灵活调整导航条的显示位置的方式，通过检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，目标页面包含多个组件和多个组件的目标导航条，目标导航条位于目标页面的导航条位置，第一触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；响应第一触发操作，将目标显示窗口内显示的页面位置调整为第一页面位置；在第一页面位置大于导航条位置的情况下，在目标显示窗口的第一窗口位置上显示目标导航条，由于在显示窗口中所显示的页面位置大于导航条位置时，控制导航条在显示窗口的特定位置显示(例如，吸顶显示)，从而可以实现方便用户使用导航条进行页面显示位置定位的目的，达到了提高页面导航的显示方式对不同页面的适用性、提升页面内容定位效率的技术效果，进而解决了相关技术中的页面导航的显示方式存在的页面适用性差、页面内容定位效率差的问题。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例的一种可选的页面导航的显示方法的硬件环境的示意图；

图2是根据本申请实施例的一种可选的页面导航的显示方法的流程示意图；

图3是根据本申请实施例的一种可选的页面导航的显示方法的示意图；

图4是根据本申请实施例的另一种可选的页面导航的显示方法的示意图；

图5是根据本申请实施例的另一种可选的页面导航的显示方法的流程示意图；

图6是根据本申请实施例的又一种可选的页面导航的显示方法的流程示意图；

图7是根据本申请实施例的一种可选的页面导航的显示装置的结构框图；

图8是根据本申请实施例的一种可选的电子设备的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

首先，在对本申请实施例进行描述的过程中出现的部分名词或者术语适用于如下解释：

1、JavaScript：脚本编程语言，支持Web(World Wide Web，全球广域网，也称为万维网)应用程序的客户端和服务器端构件的开发。在客户端，JavaScript可用于编写Web浏览器在Web页面上下文中执行的程序，在服务器端，JavaScript可用于编写用于处理Web浏览器提交的信息并相应地更新浏览器显示的页面。

2、CSS(Cascading Style Sheets)：是指层叠样式表，是一种用来表现HTML(HyperText Markup Language，超文本标记语言)、或XML(EXtensible Markup Language，可扩展标记语言)等文件样式的计算机语言。CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化。

3、JQUERY：是一个快速、简洁的JavaScript框架(JavaScript代码库)。

根据本申请实施例的一个方面，提供了一种页面导航的显示方法。可选地，在本实施例中，上述页面导航的显示方法可以应用于如图1所示的由终端102和服务器104所构成的硬件环境中。如图1所示，服务器104通过网络与终端102进行连接，可用于为终端或终端上安装的客户端提供服务(如游戏服务、应用服务等)，可在服务器上或独立于服务器设置数据库，用于为服务器104提供数据存储服务。

上述网络包括但不限于以下至少之一：有线网络，无线网络，该有线网络可以包括但不限于以下至少之一：广域网、城域网或局域网，该无线网络可以包括但不限于以下至少之一：蓝牙、WIFI(Wireless Fidelity,无线保真)及其他实现无线通信的网络。上述终端102可以是计算数据的终端，如移动终端(例如手机、平板电脑)、笔记本电脑、PC机等终端上。上述服务器可以包括但不限于任何可以进行计算的硬件设备。

本申请实施例的页面导航的显示方法可以由服务器104来执行，也可以由终端102来执行，还可以是由服务器104和终端102共同执行。其中，终端102执行本申请实施例的页面导航的显示方法也可以是由安装在其上的客户端来执行。

以由终端102来执行本实施例中的页面导航的显示方法为例，图2是根据本申请实施例的一种可选的页面导航的显示方法的流程示意图，如图2所示，该方法的流程可以包括以下步骤：

步骤S202，检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，目标页面包含多个组件和多个组件的目标导航条，目标导航条位于目标页面的导航条位置，第一触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置。

本本实施例中所提供的页面导航的显示方法可以应用于通过显示窗口显示页面的页面内容的场景。上述页面可以是网页中的页面，也可以是在终端上安装的应用客户端中的页面，还可以是其他类型的显示窗口中的页面。页面可以是基于某一编程语言的页面，例如，利用JavaScript编写的页面。，本实施例中对于显示窗口的类型和页面编写所使用的编程语言不作限定。

目标页面可以是在目标终端设备的屏幕上的目标显示窗口中显示的一个页面。目标终端设备为目标用户所使用的设备。本实施例中的页面导航的显示方法可以是由上述目标终端设备执行的。

目标页面包含有多个组件和多个组件的目标导航条，多个组件中的每个组件对应于目标导航条上的一个导航项(导航条目)，每个导航项可以用于定位多个组件中与其对应的组件。多个组件中的每个组件是指目标页面中的一个区域中的内容项，即，通过对多个组件进行拼接，可以得到目标页面的主体部分。

目标页面可以是用于进行信息显示的页面，在目标页面中可以包含多种信息。可选地，目标页面可以是至少一个对象(例如，云产品)的对象页(例如，产品页)。每个组件中显示的内容项可以是至少一个对象的对象内容、或者至少一个对象的关联内容。本实施例中以目标页面为云产品的产品页为例进行说明，对于其他通过对多个组件进行拼接所得到的页面，本实施例中的页面导航的显示方法同样适用。

目标导航条位于目标页面的导航条位置，导航条位置是目标页面中为目标导航条所配置的一个页面位置，一般位于目标页面靠上的位置。导航条位置可以是导航条上的特定点的位置，目标导航条的其他位置可以按照与特定点的相对关系进行确定。目标导航条可以是一个方形区域，例如，平行于目标页面的上边界的条形区域，在此情况下，导航条位置可以是目标导航条在目标页面中的相对偏移的位移高度，比如，目标导航条的上边界与目标页面的上边界之间的距离。

例如，导航条可以通过导航条的导航高度和导航条的位置(导航条位置，可以是导航条在网页中的相对偏移的位移高度)进行表示。如图3所示，当用户首次进入产品页面后，获取当前网页中的导航高度，例如，50px(50像素的高度)。此外，还可以通过JavaScript来获取导航条在网页中的相对偏移的位移高度，即，当前导航所在的位置高度，例如：400px(400像素的高度)。

类似地，多个组件中每个组件对应于目标页面中的一个组件区域，组件区域可以通过组件高度和组件位置进行表示，组件位置是指组件在目标网页中的相对偏移的位移高度。不同组件的组件高度可以是相同的，也可以是不同的。不同组件的组件位置一般是不同的。

页面的页面总高度可以是按照其包含的内容确定，其不是固定值，即，不同页面的页面总高度可以是不同的。目标显示窗口能够显示的内容是有限的，例如，最多显示高度值与目标显示窗口的窗口高度(即，屏幕窗口高度)相等的页面内容。

目标用户可以通过操作目标终端设备来调整目标显示窗口中所显示的页面内容，即，目标页面在目标显示窗口内显示的页面位置。上述页面位置可以是目标页面在目标显示窗口内显示的页面区域的位置，可以是显示的页面区域在目标页面中的相对偏移的位移高度，例如，图3中的虚线为目标页面在目标显示窗口内显示的页面区域，显示的页面位置为该页面区域的上边界与目标页面的上边界之间的距离。

目标终端设备可以检测到对目标页面所执行的第一触发操作，该第一触发操作可以用于触发调整目标页面在目标显示窗口内显示的页面位置。第一触发操作(下述第二触发操作与此类似)可以是对目标终端设备的屏幕(触摸屏)执行的触摸操作，可以是通过语音输入部件(例如，麦克风、麦克风阵列)检测到的语音指令，还可以是通过图像采集部件(或者，传感器部件)采集到的隔空操作，还可以是通过其他检测部件所检测到的触发操作，本实施例中对此不作限定。

例如，当用户在产品页面中进行滚动鼠标操作、或者点击导航栏触发事件时，目标显示窗口上所显示的目标页面的页面位置会发生变化。

步骤S204，响应第一触发操作，将目标显示窗口内显示的页面位置调整为第一页面位置。

响应第一触发操作，目标终端设备可以将目标显示窗口内显示的页面位置由当前页面位置调整为第一页面位置。这里的当前页面位置是指在检测到第一触发操作时目标页面在目标显示窗口内显示的当前位置。在调整到第一页面位置之后，目标页面在目标显示窗口内显示的当前位置为第一页面位置。

上述调整操作可以是一个直接跳转的过程，例如，将目标显示窗口内显示的页面位置由当前页面位置直接跳转至第一页面位置。可选地，上述调整操作可以是一个跳转过渡的过程，例如，将目标显示窗口内显示的页面位置由当前页面位置通过在目标时长内的页面动画过渡到第一页面位置。本实施例中对于调整显示的页面位置的方式不作限定。

需要说明的是，如果目标页面的页面总高度小于或者等于目标显示窗口所允许显示的页面高度，目标终端设备也可以不允许通过触发操作(比如，第一触发操作)触发调整目标页面在目标显示窗口中所显示的页面位置。

步骤S206，在第一页面位置大于导航条位置的情况下，在目标显示窗口的第一窗口位置上显示目标导航条。

在第一页面位置大于导航条位置的情况下，如果不对导航条的显示位置进行调整，在目标显示窗口中至多能显示出目标导航条的部分，或者，完全显示不出目标导航条。在此情况下，目标页面在目标显示窗口中显示的页面区域未包含完整的目标导航条，目标导航条可能无法起到导航定位的作用。

为了保证用户可以通过目标导航条进行组件定位，以提高页面内容定位的便捷性，目标终端设备可以在目标显示窗口的第一窗口位置上显示目标导航条。第一窗口位置可以是目标显示窗口中不影响目标页面显示、或者对目标页面显示影响较小的位置，例如，目标导航条可以吸顶显示，靠左侧显示，靠右侧显示，靠底部显示。本实施例中对于第一显示位置不作限定。

考虑到导航条一般是在多个组件的组件区域之上显示的，如果目标显示窗口中显示的页面位置小于或者等于导航条位置，目标终端设备可以控制目标导航条在配置的导航条位置上进行显示。

为了避免由于目标导航条的显示位置发生跳转导致的视觉信息获取不连贯，可以在第一页面位置大于导航条位置的情况下，控制目标导航条在目标显示窗口中进行吸顶显示，也即，在目标显示窗口的顶部位置上显示目标导航条。

可选地，在目标显示窗口的第一窗口位置上显示目标导航条之后，检测到对目标页面执行的第三触发操作，第三触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；响应第三触发操作，将目标显示窗口内显示的页面位置调整为第三页面位置；在第三页面位置小于或者等于导航条位置的情况下，在导航条位置上显示目标导航条。

作为一种可选示例，可以为导航条配置两种布局样式，一种是吸顶显示，一种是按照页面中的相对位置显示，其中，吸顶显示可以利用CSS属性实现。如果当前位置高度大于产品导航的高度(导航条位置)，可以采用吸顶显示的布局样式在浏览器顶部展示，之后可以在导航条的两种布局样式之间进行切换。

比如，可以配置在当前位置超出屏幕窗口高度的情况下，导航条在浏览器顶部展示。导航条所在的位置高度为400px，如果当前显示的位置高度为1600px，那么，导航可以采用在浏览器顶部展示的样式进行显示；如果现在将页面滚动到200px位置高度时，导航可以切换回默认的相对定位布局样式。

通过上述步骤S202至步骤S206，检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，目标页面包含多个组件和多个组件的目标导航条，目标导航条位于目标页面的导航条位置，第一触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；响应第一触发操作，将目标显示窗口内显示的页面位置调整为第一页面位置；在第一页面位置大于导航条位置的情况下，在目标显示窗口的第一窗口位置上显示目标导航条，解决了相关技术中的页面导航的显示方式存在的页面适用性差、页面内容定位效率差的问题，提高了页面导航的显示方式对不同页面的适用性、提升了页面内容定位效率。

作为一种可选的实施例，将目标显示窗口内显示的页面位置调整为第一页面位置包括：

S11，在第一触发操作为目标导航条上的第一导航项的选取操作的情况下，确定多个组件中与第一导航项匹配的第一组件的组件位置；

S12，按照第一组件的组件位置进行定位，将目标显示窗口上显示的页面位置调整为第一页面位置，其中，第一页面位置是由第一组件的组件位置所确定的位置。

第一触发操作可以是目标导航条上的第一导航项的选取操作(例如，点击操作)。目标用户可以通过对第一导航项执行选取操作来触发进行组件内容定位，从而导航到目标用户的意向组件内容。

在检测到第一导航项的选取操作之后，目标终端设备可以获取到第一导航项的导航项标识。按照导航项标识与组件标识之间的对应关系，目标终端设备可以确定出与第一导航项的导航项标识对应的第一组件的组件标识，进而确定出第一组件的组件位置。

第一组件的组件位置是第一组件的组件区域在目标页面上的位置，与目标导航条的导航条位置类似的，第一组件的组件位置可以是第一组件的组件区域中的特定点的位置，也可以是其在目标页面中的相对偏移的偏移高度，本实施例中对此不作限定。

按照第一组件的组件位置进行定位，目标终端设备可以将目标显示窗口上显示的页面位置调整为第一页面位置，第一页面位置可以是由第一组件的组件位置所确定的位置，其可以是第一组件的组件位置，也可以是小于第一组件的组件位置的一个页面位置。

例如，如图4所示，用户点击产品页面的导航条目内容(导航项3)时，触发单击事件，可以对与点击的导航项对应的组件区域进行定位，在显示窗口中显示的页面区域会跳转到图4中的虚线框内的页面区域。如果组件3的组件区域及其以下的页面区域不足以填满一屏，则可以按照不满一屏显示页面内容(不满的内容可以空白)，也可以显示目标页面从底部向上的一屏页面内容。

通过本实施例，通过响应检测到的导航项的选取操作进行组件区域定位，可以页面显示位置定位的便捷性。

作为一种可选的实施例，按照第一组件的组件位置进行定位，将目标显示窗口上显示的页面位置调整为第一页面位置包括：

S21，将第一组件的组件位置与目标导航条的高度之间的差值，确定为第一页面位置；

S22，根据第一页面位置控制目标页面的滚动条在第一时长内进行滚动，以将目标显示窗口上显示的页面位置调整为第一页面位置。

目标导航条具有一定的高度(导航高度)，如果控制目标导航条进行吸顶显示(第一显示位置为目标显示窗口的顶部位置)，为了保证显示出的第一组件的组件区域的完整性，可以将第一组件的组件位置与目标导航条的高度(导航高度)之间的差值，确定为第一页面位置。

例如，上述组件区域的定位可以是利用JavaScript的定位来实现的，实现方式可以为：利用用户触发的导航项的ID与产品内容ID进行匹配，匹配成功后，可以计算并设置匹配产品的滚动条的垂直位置，比如，匹配目标的位移高度为：1600px，由于导航条的导航高度为50px，定位到1550px(1600px-50px)的高度位置。

在得到第一页面位置之后，目标终端设备可以按照第一页面位置调整目标显示窗口中所显示出的页面区域。调整页面显示位置的操作可以是通过控制导航条滚动实现的。目标终端设备可以根据第一页面位置，控制目标页面的滚动条在第一时长内进行滚动，可以是根据第一页面位置和当前页面位置配置滚动条的滚动距离，并控制滚动条在第一时长内滚动配置的滚动距离，以将目标显示窗口上显示的页面位置调整为第一页面位置。

比如，如果直接设置匹配产品的滚动条的垂直位置之后，页面立马定位到目前产品位置，用户获取到的视觉信息不连贯，影响用户的视觉体验。为了提高用户获取到的视觉信息的连贯性，在定位时，可以利用CSS自定义页面滚动的动画效果，实现定位目标产品内容的动画效果时长可以为：1秒。

需要说明的是，目标导航条是在可以是在目标页面之上显示的，目标导航条会遮挡第一组件的组件区域之上的一小段页面区域(高度为导航高度)，在目标显示窗口中显示出的是目标导航条和第一组件的组件区域连续显示的效果。

通过本实施例，将第一组件的组件位置与目标导航条的高度之间的差值，确定为第一页面位置，可以保证组件区域显示的完整性；通过控制滚动条在一段时间内滚动，从而控制目标页面进行滚动，提高用户获取到的视觉信息的连贯性。

作为一种可选的实施例，将目标显示窗口内显示的页面位置调整为第一页面位置包括：

S31，在第一触发操作为目标页面的页面滚动操作的情况下，确定与页面滚动操作对应的页面滚动参数，其中，页面滚动参数用于控制目标页面的滚动条的滚动距离；

S32，按照页面滚动参数控制滚动条滚动第二滚动距离，以将目标显示窗口内显示的页面位置调整为第一页面位置。

第一触发操作可以是目标页面的页面滚动操作，例如，通过滑动鼠标、触摸屏、或者特定的隔空手势操作。目标用户可以通过对目标页面执行页面滚动操作来触发页面滚动，从而触发由当前位置向上或者向下滚动到其他位置。

在检测到页面滚动操作之后，目标终端设备可以获取与页面滚动操作对应的页面滚动参数，页面滚动参数可以用于控制目标页面滚动的距离，可以包括但不限于以下至少之一：滚动方向，滚动速度，滚动时间。

目标终端设备可以按照页面滚动参数控制滚动条进行滚动，以控制显示的目标页面进行滚动。滚动条滚动的距离为第二滚动距离，对应地，目标显示窗口中显示的页面位置滚动了对应的距离，从而将目标显示窗口内显示的页面位置调整为第一页面位置。

通过本实施例，通过页面滚动操作控制显示窗口中显示的页面区域进行滚动，可以提高页面定位的灵活性。

作为一种可选的实施例，在将目标显示窗口内显示的页面位置调整为第一页面位置之后，上述方法还包括：

S41，根据第一页面位置和多个组件中的每个组件的组件位置，从多个组件中获取与第一页面位置匹配的第二组件；

S42，将目标导航条上与第二组件匹配的第二导航项的显示状态更新为已选中状态。

在通过滚动操作控制目标显示窗口中显示的页面位置进行滚动的情况下，目标页面在目标显示窗口中显示的当前位置发生改变，可以控制目标导航条(目标导航条中的导航项)联动，无论是向上滚动还是向下滚动，均可控制目标导航条进行联动。

根据第一页面位置和多个组件中的每个组件的组件位置，目标终端设备可以从多个组件中获取与第一页面位置匹配的第二组件。按照第一窗口位置的不同，可以采用不同的匹配方式确定出第二组件。

作为一种可选的实施方式，如果在第一页面位置大于导航条位置的情况下，控制目标导航条在目标显示窗口的非顶部显示，则可以根据第一页面位置和多个组件中的每个组件的组件位置，从多个组件中获取与第一页面位置匹配的第二组件，第一页面位置位于第二组件的组件区域内，即，第一页面位置大于或者等于第二组件的组件位置，小于第二组件的下一个组件的组件位置。

作为另一种可选的实施方式，如果在第一页面位置大于导航条位置的情况下，控制目标导航条在目标显示窗口的顶部显示，则可以根据第一页面位置、目标导航条的高度、以及多个组件中的每个组件的组件位置，从多个组件中获取与第一页面位置匹配的第二组件，第一页面位置与目标导航条的高度的和位于第二组件的组件区域内，即，第一页面位置与目标导航条的高度的和大于或者等于第二组件的组件位置，小于第二组件的下一个组件的组件位置。

在确定出第二组件之后，目标终端设备可以确定目标导航条中的多个导航项中与第二组件匹配的第二导航项，并将第二导航项的显示状态更新为已选中状态。在目标显示窗口中显示出的效果为：与目标显示窗口中显示出的组件中最靠前的组件对应的导航项显示为被选中状态。

例如，当用户在网页中进行滚动操作时，滑动到不同产品的内容区，通过高度计算来判断当前位置属于哪个产品内容区的区域内，并将导航项的选中效果进行样式切换，从而实现导航条联动效果。比如，当前位置为1600px，当前产品内容的ID为目标ID，则导航栏中与目标ID对应的模块显示为被选中。

通过本实施例，通过控制目标导航条跟随页面的滚动进行联动，可以方便用户获知当前显示的导航项，提高信息获取的便捷性。

作为一种可选的实施例，在目标显示窗口的第一窗口位置上显示目标导航条之后，上述方法还包括：

S51，检测到对目标导航条所执行的位置调整操作，其中，位置调整操作用于将目标导航条在目标显示窗口上的显示位置调整为第二窗口位置；

S52，响应位置调整操作，在目标显示窗口的第二窗口位置上显示目标导航条。

目标导航条的位置可以通过对其执行的操作进行更改。目标用户可以对目标导航条执行位置调整操作，例如，拖动操作，点击操作，以将目标导航条在目标显示窗口上的显示位置调整为第二窗口位置。

目标终端设备可以检测到对目标导航条所执行的位置调整操作，并响应该位置调整操作，在目标显示窗口的第二窗口位置上显示目标导航条。在第二窗口位置上显示目标导航条的同事，可以同时调整目标导航条的显示方式，例如，导航条在顶部或者顶部时导航项可以是排成一行，导航条在左侧或者右侧时导航项可以是排成一列，本实施例中对此不作限定。

例如，用户可以拖动导航条，将其从顶部拖动底部，导航条在显示窗口中变为底部显示。

通过本实施例，通过按照检测到的位置调整操作调整导航条的显示位置，可以提高导航显示的灵活性，提高用户的使用体验。

作为一种可选的实施例，在检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作之后，上述方法还包括：

S61，检测到对目标页面所执行的第二触发操作，其中，第二触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；

S62，在第二触发操作与第一触发操作之间的时间间隔小于目标时间间隔的情况下，在与第一触发操作间隔目标时间间隔之后，响应第二触发操作，将目标显示窗口内显示的页面位置调整为第二页面位置。

为了避免由于频繁触发滚动事件导致的终端性能消耗大、以及页面卡顿的问题，可以对滚动操作的操作频率进行控制，以优化触发事件，提高响应效率。上述滚动事件可以由选取导航项触发的滚动事件，也可以是由于滚动页面所触发的滚动事件，本实施例中对此不作限定。

例如，在用户进行页面滚动操作时，会频繁触发滚动事件，进而增大性能消耗，导致页面卡顿，对此，可以利用函数触发对操作频率进行控制，用来优化触发事件，提高响应效率。

在第一触发操作之后，目标终端设备又检测到对目标页面所执行的第二触发操作，该第二触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置。目标终端设备可以确定第一触发操作和第二触发操作之间的时间间隔，并基于确定的时间间隔与目标时间间隔之间的关系确定响应第二触发操作的时机。

如果第二触发操作与第一触发操作之间的时间间隔大于或者等于目标时间间隔，目标终端设备可以响应该第二触发操作，直接将目标显示窗口内显示的页面位置调整为第二页面位置。

如果第二触发操作与第一触发操作之间的时间间隔小于目标时间间隔，目标终端设备可以等待一定时间，在与第一触发操作间隔目标时间间隔之后，再响应第二触发操作，将目标显示窗口内显示的页面位置调整为第二页面位置。

例如，可以配置滚两次滚动事件至少间隔300毫秒触发，其中，滚动事件的执行时间为100毫秒，等待时间间隔为200毫秒，即，100毫秒触发一次滚动事件，一次滚动事件执行完成之后，在达到了200毫秒的执行时间间隔时，才会再次触发滚动事件。

通过本实施例，对滚动操作的操作频率进行控制，以优化触发事件，可以提高响应效率，减少频繁触发滚动事件导致的终端性能消耗。

下面结合可选示例对本申请实施例中的页面导航的显示方法进行解释说明。在本示例中，目标页面为云产品的产品页面，目标导航条为导航栏；页面在显示窗口中的当前位置小于或者等于导航位置(导航条位置)时，按照导航条在页面中的相对位置显示导航条，在页面在显示窗口中的当前位置大于导航位置时，导航条在显示窗口中进行吸顶显示。

本示例中的页面导航的显示方法可以适用于用户点击导航操作的场景、以及用户执行页面滚动操作的场景。对于用户来说，其可以直接通过产品导航来匹配自己的意向产品，例如，通过点击导航栏中的导航项来快速定位目标产品位置；也可以通过页面滚动的方式去寻找自己的意向产品，在产品内容超出一屏后，产品导航会在浏览器顶部显示，便于用户查看当前产品位置及进行其他操作。

对于用户点击导航操作的场景，如图5所示，本可选示例中的页面导航的显示方法的流程可以包括以下步骤：

步骤S502，用户点击导航操作。

步骤S504，获取导航高度和当前位置，其中，导航高度可以是导航栏的高度(比如，50px)，当前位置可以是：与点击的导航项所对应的特定组件的组件位置和导航高度之间的差值。

步骤S506，判断当前位置是否大于导航位置，如果是，执行步骤S508，否则，执行步骤S510。

步骤S508，确定导航栏进行吸顶显示。

步骤S510，确定导航栏进行相对位置显示。

步骤S512，锚点定位，可以利用定位来实现导航条定位对应组件位置。

步骤S514，显示过渡动画效果，定位完成，动画效果可以是利用CSS实现的页面滚动动画效果。

对于用户执行页面滚动操作的场景，如图6所示，本可选示例中的页面导航的显示方法的流程可以包括以下步骤：

步骤S602，用户执行页面滚动操作。

步骤S604，获取导航高度和当前位置，当前位置为当前页面滚动到的位置。

步骤S606，判断当前位置是否大于导航位置，如果是，执行步骤S608，否则，执行步骤S610。

步骤S608，确定导航栏进行吸顶显示。

步骤S610，确定导航栏进行相对位置显示。

步骤S612，函数触发滚动(scroll)事件，通过该函数可以触发控制用户操作的频率。

步骤S614，将当前位置与内容区ID匹配，确定当前位置属于哪个产品内容区的区域内(即，根据产品在网页中的高度去判断当前位于哪个产品)，进而匹配对应的导航项。

步骤S616，控制匹配到的导航项变为选中状态，以使页面导航对应产品名称的选中状态跟随变化。

通过本示例，可以利用JavaScript技术与现实场景相结合，实现页面的产品导航双向联动(向下滚动有联动效果，向上滚动也有联动效果)，以达到降低用户使用成本和提升用户体验的技术效果。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM(Read-Only Memory，只读存储器)/RAM(Random Access Memory，随机存取存储器)、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

根据本申请实施例的另一个方面，还提供了一种用于实施上述页面导航的显示方法的页面导航的显示装置。图7是根据本申请实施例的一种可选的页面导航的显示装置的结构框图，如图7所示，该装置可以包括：

第一检测单元702，用于检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，目标页面包含多个组件和多个组件的目标导航条，目标导航条位于目标页面的导航条位置，第一触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；

第一调整单元704，与第一检测单元702相连，用于响应第一触发操作，将目标显示窗口内显示的页面位置调整为第一页面位置；

第一显示单元706，与第一调整单元704相连，用于在第一页面位置大于导航条位置的情况下，在目标显示窗口的第一窗口位置上显示目标导航条。

需要说明的是，该实施例中的第一检测单元702可以用于执行上述步骤S202，该实施例中的第一调整单元704可以用于执行上述步骤S204，该实施例中的第一显示单元706可以用于执行上述步骤S206。

通过上述模块，检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，目标页面包含多个组件和多个组件的目标导航条，目标导航条位于目标页面的导航条位置，第一触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；响应第一触发操作，将目标显示窗口内显示的页面位置调整为第一页面位置；在第一页面位置大于导航条位置的情况下，在目标显示窗口的第一窗口位置上显示目标导航条，解决了相关技术中的页面导航的显示方式存在的页面适用性差、页面内容定位效率差的问题，提高了页面导航的显示方式对不同页面的适用性、提升了页面内容定位效率。

作为一种可选的实施例，第一调整单元704包括：

第一确定模块，用于在第一触发操作为目标导航条上的第一导航项的选取操作的情况下，确定多个组件中与第一导航项匹配的第一组件的组件位置；

定位模块，用于按照第一组件的组件位置进行定位，将目标显示窗口上显示的页面位置调整为第一页面位置，其中，第一页面位置是由第一组件的组件位置所确定的位置。

作为一种可选的实施例，第一调整模块包括：

确定子模块，用于将第一组件的组件位置与目标导航条的高度之间的差值，确定为第一页面位置；

控制子模块，用于根据第一页面位置控制目标页面的滚动条在第一时长内进行滚动，以将目标显示窗口上显示的页面位置调整为第一页面位置。

作为一种可选的实施例，第一调整单元704包括：

第二确定模块，用于在第一触发操作为目标页面的页面滚动操作的情况下，确定与页面滚动操作对应的页面滚动参数，其中，页面滚动参数用于控制目标页面的滚动条的滚动距离；

控制模块，用于按照页面滚动参数控制滚动条滚动第二滚动距离，以将目标显示窗口内显示的页面位置调整为第一页面位置。

作为一种可选的实施例，上述装置还包括：

匹配单元，用于在将目标显示窗口内显示的页面位置调整为第一页面位置之后，根据第一页面位置和多个组件中的每个组件的组件位置，从多个组件中获取与所述第一页面位置匹配的第二组件；

更新单元，用于将目标导航条上与第二组件匹配的第二导航项的显示状态更新为已选中状态。

作为一种可选的实施例，上述装置还包括：

第二检测单元，用于在目标显示窗口的第一窗口位置上显示目标导航条之后，检测到对目标导航条所执行的位置调整操作，其中，位置调整操作用于将目标导航条在目标显示窗口上的显示位置调整为第二窗口位置；

第二显示单元，用于响应位置调整操作，在目标显示窗口的第二窗口位置上显示目标导航条。

作为一种可选的实施例，上述装置还包括：

第三检测单元，用于在检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作之后，检测到对目标页面所执行的第二触发操作，其中，第二触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；

第二调整单元，用于在第二触发操作与第一触发操作之间的时间间隔小于目标时间间隔的情况下，在与第一触发操作间隔目标时间间隔之后，响应第二触发操作，将目标显示窗口内显示的页面位置调整为第二页面位置。

此处需要说明的是，上述模块与对应的步骤所实现的示例和应用场景相同，但不限于上述实施例所公开的内容。需要说明的是，上述模块作为装置的一部分可以运行在如图1所示的硬件环境中，可以通过软件实现，也可以通过硬件实现，其中，硬件环境包括网络环境。

根据本申请实施例的又一个方面，还提供了一种用于实施上述页面导航的显示方法的电子设备，该电子设备可以是终端、服务器、或者其组合。

图8是根据本申请实施例的一种可选的电子设备的结构框图，如图8所示，包括处理器802、通信接口804、存储器806和通信总线808，其中，处理器802、通信接口804和存储器806通过通信总线808完成相互间的通信，其中，

存储器806，用于存储计算机程序；

处理器802，用于执行存储器806上所存放的计算机程序时，实现如下步骤：

S1，检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，目标页面包含多个组件和多个组件的目标导航条，目标导航条位于目标页面的导航条位置，第一触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；

S2，响应第一触发操作，将目标显示窗口内显示的页面位置调整为第一页面位置；

S3，在第一页面位置大于导航条位置的情况下，在目标显示窗口的第一窗口位置上显示目标导航条。

可选地，在本实施例中，上述的通信总线可以是PCI(Peripheral ComponentInterconnect，外设部件互连标准)总线、或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。通信接口用于上述电子设备与其他设备之间的通信。

存储器可以包括RAM，也可以包括非易失性存储器(non-volatile memory)，例如，至少一个磁盘存储器。可选地，存储器还可以是至少一个位于远离前述处理器的存储装置。

作为一种示例，存储器806中可以但不限于包括上述页面导航的显示装置中的第一检测单元702、第一调整单元704以及第一显示单元706。此外，还可以包括但不限于上述页面导航的显示装置中的其他模块单元，本示例中不再赘述。

上述处理器可以是通用处理器，可以包含但不限于：CPU(Central ProcessingUnit，中央处理器)、NP(Network Processor，网络处理器)等；还可以是DSP(DigitalSignal Processing，数字信号处理器)、ASIC(Application Specific IntegratedCircuit，专用集成电路)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

此外，上述电子设备还包括：显示器，用于显示目标显示窗口，目标显示窗口中可以显示有目标页面的全部或者部分页面区域。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例在此不再赘述。

本领域普通技术人员可以理解，图8所示的结构仅为示意，实施上述页面导航的显示方法的设备可以是终端设备，该终端设备可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile Internet Devices，MID)、PAD等终端设备。图8其并不对上述电子设备的结构造成限定。例如，电子设备还可包括比图8中所示更多或者更少的组件(如网络接口、显示装置等)，或者具有与图8所示的不同的配置。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：闪存盘、ROM、RAM、磁盘或光盘等。

根据本申请实施例的又一个方面，还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以用于执行本申请实施例中上述任一项页面导航的显示方法的程序代码。

可选地，在本实施例中，上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。

可选地，在本实施例中，存储介质被设置为存储用于执行以下步骤的程序代码：

S1，检测到对在目标显示窗口上显示的目标页面所执行的第一触发操作，其中，目标页面包含多个组件和多个组件的目标导航条，目标导航条位于目标页面的导航条位置，第一触发操作用于触发调整目标页面在目标显示窗口内显示的页面位置；

S2，响应第一触发操作，将目标显示窗口内显示的页面位置调整为第一页面位置；

S3，在第一页面位置大于导航条位置的情况下，在目标显示窗口的第一窗口位置上显示目标导航条。

可选地，本实施例中的具体示例可以参考上述实施例中所描述的示例，本实施例中对此不再赘述。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、ROM、RAM、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在上述计算机可读取的存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的客户端，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例中所提供的方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是至少两个单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。