[发明专利]基于vue滚动事件的动态锚点的实现方法

说明书

本发明属于web网页技术领域，其公开了一种基于vue滚动事件的动态锚点的实现方法，通过对滚动事件的监听，在vue中利用动态锚点实现页面的平滑跳转。该方法包括：在vue表单的父组件中增加类名作为钩子，在其子组件中设置函数，通过将offset的值赋给Scroll，实现锚点的功能；当用户点击锚点的时候，通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小；将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动；在创建vue实例的时候，在vue生命周期中mounted阶段设置scroll函数，当用户滑动滚动条的时候，触发scroll函数计算滚动条移动的距离，通过对比从而确认此时对应激活的锚点，完成对于锚点css样式的修改。

技术领域

本发明属于web网页技术领域，具体涉及一种基于vue滚动事件的动态锚点的实现方法。

背景技术

随着互联网技术的普及，网站的浏览已经成为了用户生活当中必不可少的一部分，然而网站内容的多样性可能对用户的浏览造成困扰，而动态锚点的实现则可以让用户快速查找到自己所需的网页部分，对网站的结构有清晰的认识。vue框架作为当下热门的前端开发框架，采用自底向上增量开发的设计，开发过程当中只关注视图层，而且便于与第三方库或既有项目整合，当与现代化的工具链以结及各种支持类库合使用时，Vue也完全能够为复杂的单页应用提供驱动。这些都使得vue框架相对于react、angular等框架显得更加轻量、简洁、高效而且易于上手。

目前在网站开发中锚点的实现，主要是获取跳转部分的id或者class再通过html中链接直接完成跳转或者是利用jquery来实现跳转，使用的方式比较传统；而在最新的vue框架中，jquery的animate()方法的不支持和对滚动事件的监听的独特方式都导致了这些方式并不适合，因此本申请主要就是针对vue框架，通过对vue滚动事件的监听，完成动态锚点的实现。

发明内容

本发明所要解决的技术问题是：提出一种基于vue滚动事件的动态锚点的实现方法，通过对滚动事件的监听，在vue中利用动态锚点实现页面的平滑跳转。

本发明解决上述技术问题所采用的技术方案是：

基于vue滚动事件的动态锚点的实现方法，包括：

锚点的实现和平滑跳转：在vue表单的父组件中增加类名作为钩子，在其子组件中设置函数，通过将offset的值赋给Scroll，实现锚点的功能；当用户点击锚点的时候，通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小；将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动；

动态锚点的状态更改：在创建vue实例的时候，在vue生命周期中mounted阶段设置scroll函数，当用户滑动滚动条的时候，触发scroll函数计算滚动条移动的距离，通过对比从而确认此时对应激活的锚点，完成对于锚点css样式的修改。

作为进一步优化，所述通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小，将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动，具体包括：

在元素子组件中通过函数计算得到此时scroll和offset的值，计算两者的差值；若差值为正，将该差值除以设计所要移动的次数，用scroll的值减去所得到的数字，将浏览器的计时器设置合适的时间，依次完成所有的次数，实现向上滑动；若差值为负，则将该差值除以设计所要移动次数获取的值加上scroll的值，在计时器下依次完成每一段移动，实现向下滑动。

本发明的有益效果是：

可以让用户在浏览网页时快速跳转到所需部分，减少操作时间。同时用户在拖动滚动条时能够实时分辨出所浏览的内容，提高了用户的操作体验，实现网站布局的整体优化，而且通过锚点完成网页设计便于后期对网站内容的分模块维护、管理。