Page anchor point positioning and animation highlighting method and system based on React project

Abstract

The invention discloses a page anchor point positioning and animation highlighting method and system based on a React project. The invention relates to the field of Web front-end development. The method comprises the following steps of: registering a scrolling event monitor by using a window.addEventListener method after a page is loaded (namely in a life cycle method or a user Effect hook of a React component); and registering a scrolling event monitor by using a window.addEventListener method. The monitor can be triggered when the user scrolls the page, and is used for subsequent scrolling monitoring and preparation of highlight animations. Through smooth scrolling and highlight display, the users can clearly see the current positions of the users and other important anchor points on the page. An interaction feedback mechanism ensures that the users can know their operation results immediately, and the interactivity and usability of the page are enhanced. By means of the highlight display and window monitoring functions of the anchor points, page navigation is more visual and easy to understand. The user can quickly position the interested content without blindly searching the content in the page.

Description

Technical Field

[0001] The present invention relates to the field of Web front-end development, and more specifically, to a method for realizing anchor point positioning in a page and corresponding highlight animation effects in a React project, and in particular to a method and system for realizing page anchor point positioning and highlight animation based on a React project. Background Art

[0002] In today's digital age, with the widespread adoption of Single Page Applications (SPAs), the optimization of user interaction experience has become a core issue in the field of front-end development. Especially in web environments with complex content and high information density, efficient and intuitive page navigation mechanisms are not only the key to improving user satisfaction, but also the cornerstone for ensuring content accessibility and ease of use. Users expect to be able to quickly locate the information fragments they are interested in without leaving the current page. This demand has prompted developers to explore more refined and intelligent navigation strategies.

[0003] Traditional page scrolling and positioning methods often have difficulty in balancing smoothness, accuracy, and the effectiveness of visual guidance, thus limiting the overall user experience. Smooth scrolling not only requires the scrolling process to be natural and smooth to reduce abruptness, but also ensures consistent performance on any device and browser. At the same time, precise positioning to the edge of the content area to avoid occlusion or misalignment is a prerequisite for achieving a professional-level browsing experience. In addition, timely visual feedback, such as highlighting of the target area, is of significant importance in confirming that the user has successfully navigated to the expected location. It is responsible for enhancing the user's sense of direction and improving the intuitiveness of interface interaction.

[0004] However, existing technical solutions face many challenges in integrating these features, especially in the process of integrating with mainstream front-end frameworks such as React. React is widely praised for its component-based development, virtual DOM and efficient update mechanism, but any in-page navigation solution must be deeply coordinated with React's lifecycle management, state control and rendering logic to avoid unnecessary performance loss or code redundancy. Therefore, developing an in-page navigation system that can meet advanced functions such as smooth scrolling, precise positioning and visual highlighting, and can seamlessly integrate into the React development model, has become an important direction for front-end technology innovation.

[0005] To this end, the present invention proposes a method and system for positioning page anchors and highlighting animations based on a React project. Summary of the invention

[0006] In view of this, the present invention hopes to provide a method and system for positioning page anchors and highlighting animations based on the React project to solve or alleviate the technical problems existing in the prior art, that is, to implement a solution for positioning page anchors and accompanying highlighting animations in the React project, which requires not only providing a smooth scrolling experience, but also providing visual feedback when the user reaches the target anchor point, and at least providing a beneficial option for this; the technical solution of the present invention is implemented as follows:

[0007] First, the method of positioning and highlighting animation of page anchors based on the React project:

[0008] 1. Overview:

[0009] The present invention aims to solve the above technical problems by constructing a management basis for anchor information, deploying listeners for scrolling and viewport changes, customizing each anchor element to be conveniently registered and closely integrated with the component state, and utilizing efficient smooth scrolling technology combined with animation control to quickly scroll the page to the specified anchor point, dynamically adjusting the highlight state of UI elements, and effectively guiding the flow of user attention; through integrated technical means, the originally scattered page navigation operations are integrated into a coherent and efficient process.

[0010] (II) Technical solution:

[0011] 2.1 Step S1, initialization loading:

[0012] When a user visits a web page that contains this function, the React component starts to load the information array about the anchor and initialize it. After the page is loaded, the scroll event listener is registered to prepare for subsequent scroll monitoring and highlight animation.

[0013] 2.1.1 Step S100, initialization of anchor point information array:

[0014] When a user visits a web page that contains this feature, the lifecycle methods of the React component (such as the useEffect hook) are triggered. A state variable is initialized to store an array of anchor information. This array can be an empty array, indicating that there is no anchor information at the beginning, or some default anchor information can be preset.

[0015] Each element in the anchor information array is an object that contains the anchor ID, the corresponding DOM reference (ref), and style information.

[0016] 2.1.2 Step S101, register a scroll event listener:

[0017] After the page is loaded (i.e. in the lifecycle method of the React component or the useEffect hook), use the window.addEventListener method to register a scroll event listener. The listener will be triggered when the user scrolls the page, and is used for subsequent scroll monitoring and highlight animation preparation. In the listener callback function, you can get the current scroll position and update the anchor state or trigger the highlight animation based on this position.

[0018] 2.2 Step S2, anchor registration:

[0019] In the component's JSX structure, register the anchor using custom Hooks.

[0020] During the registration process, the component state is updated so that all declared anchor information (ID, DOM reference, and style) is recorded.

[0021] 2.2.1 Step S200, create custom Hooks:

[0022] Used to register and manage anchors in components. The Hooks receives the anchor's ID and style as parameters and returns a ref object that is used to associate a specific DOM element. Inside the Hooks, use useState or useRef to store and manage the state of the anchor.

[0023] 2.2.2 Step S201, use custom Hooks in JSX structure:

[0024] In the component's JSX structure, use the ref returned by the custom Hooks for the DOM element that needs to be registered as an anchor.

[0025] For example, <div ref＝{anchorref}>, where anchorRef is the ref object returned by useAnchor Hooks. In this way, the DOM element is associated with the anchor information.

[0026] 2.2.3 Step S202, call the registration function and update the component status:

[0027] In custom Hooks or components, call a registration function to add the anchor ID, DOM reference, and style information to the state management. After updating the component state, all declared anchor information will be recorded in the component state for subsequent use.

[0028] 2.3 Step S3, user interaction:

[0029] When a user clicks a navigation link or button on a page, the component receives the interaction event and searches for the corresponding anchor information based on the clicked target.

[0030] 2.3.1 Step S300, monitoring user interaction events:

[0031] In React components, add event listeners, such as onClick events, to navigation links or buttons. When users click on these elements, the corresponding event handling functions are triggered.

[0032] 2.3.2 Step S301, obtaining the information of the click target:

[0033] In the event processing function, the relevant information of the clicked element is obtained through the event object (such as e or event), including the element's ID, class name or other custom attributes, which are used to identify the anchor point the user wants to navigate to.

[0034] 2.3.3 Step S302, search for corresponding anchor point information:

[0035] Using the information obtained in the previous step, find the corresponding anchor information in the component's state or context. The anchor information should include the anchor's ID, DOM reference, and style, which have been registered and recorded in step S2. After finding the corresponding anchor information, subsequent smooth scrolling and positioning operations can be performed.

[0036] 2.4 Step S4, smooth scrolling and positioning:

[0037] The positioning controller calculates the scroll offset based on the position of the target anchor DOM element. Use the JavaScript scrolling API (scrollIntoView) to start smooth scrolling to the target position. This includes the settings of animation duration and easing effect.

[0038] 2.4.1 Step S400, calculating the rolling offset:

[0039] The positioning controller first obtains the position information of the target anchor DOM element, including the position coordinates of the element relative to the window or document. Then the controller calculates the scroll offset, which is the difference between the current scroll position and the target anchor position. This difference will be used to determine the start and end points of the scroll animation.

[0040] 2.4.2 Step S401, configure scrolling animation parameters:

[0041] Configure the parameters of the scroll animation, including animation duration and easing effect.

[0042] The animation duration determines the duration of the scrolling animation and can be adjusted according to actual needs. The easing effect affects the acceleration and deceleration of the scrolling animation, making the scrolling look more natural and smooth.

[0043] 2.4.3 Step S402, perform smooth scrolling to the target position:

[0044] Use JavaScript's scrolling API (scrollIntoView) to start smooth scrolling. Pass the calculated scroll offset, animation duration, and easing effect as parameters to the scrolling API to control the behavior of the scrolling animation. The scrolling API will be responsible for smoothly scrolling the page to the target anchor point.

[0045] 2.5 Step S5, window monitoring and highlighting:

[0046] Monitor the relationship between each anchor DOM element and the viewport, and trigger a callback once the target element enters the viewport or approaches the edge of the viewport. Based on the monitoring results, apply the previously set highlight style to the corresponding anchor element, and cancel the highlight status of other anchors to ensure a clear visual focus.

[0047] 2.5.1 Step S500, monitoring the relationship between the anchor point and the viewport:

[0048] Use JavaScript's Intersection Observer API to monitor the relationship of each anchor DOM element to the viewport. Create an observer instance for each anchor element and configure the corresponding observation options, including root element, rootMargin, and threshold.

[0049] The observer will asynchronously monitor changes to the intersection of the anchor element with the viewport and trigger a callback when changes occur.

[0050] 2.5.2 Step S501, trigger callback and apply highlight style:

[0051] When the target anchor element enters the viewport or approaches the edge of the viewport, the observer will trigger a callback. In the callback function, determine which anchor element should be highlighted based on the monitoring results. Apply the previously set highlight style to the corresponding anchor element, that is, modify the CSS class of the element.

[0052] 2.5.3 Step S502, cancel the highlight status of other anchor points:

[0053] By traversing all anchor elements and removing their highlight styles, while highlighting the current anchor element, it is necessary to cancel the highlight status of other anchors to ensure a clear visual focus.

[0054] You can also reset the styles of all anchor points before highlighting the current anchor point, and then apply the highlighted style to the current anchor point.

[0055] 2.6 Step S6, interactive feedback:

[0056] The highlight animation is executed, providing visual feedback to the user that the target location has been reached.

[0057] (III) Mechanism for solving technical problems:

[0058] When the component is initialized, the information array about the anchor is loaded and the scroll event listener is registered. This mechanism ensures that after the page is loaded, the system can immediately start monitoring the user's scrolling behavior to prepare for subsequent anchor positioning and highlight animation. Use custom Hooks to register the anchor in the component's JSX structure, and add the anchor's ID, DOM reference, style and other information to the state management. This mechanism allows developers to easily track and manage anchors in the page, providing necessary data support for subsequent user interaction, positioning and highlighting functions.

[0059] When a user clicks a navigation link or button on the page, the component receives the interaction event and looks up the corresponding anchor information based on the clicked target. This mechanism enables user interaction with the page, allowing users to click and navigate to the information fragments they are interested in. The positioning controller calculates the scroll offset based on the position of the target anchor DOM element and uses JavaScript's scrolling API to start smooth scrolling to the target position. This mechanism provides a smooth scrolling experience, reduces abruptness, and ensures that users can accurately locate the target anchor. The system monitors the relationship between each anchor DOM element and the viewport. Once the target element enters the viewport or approaches the edge of the viewport, a callback is triggered and the previously set highlight style is applied. This mechanism enhances the user's sense of orientation, improves the intuitiveness of interface interaction, and allows users to clearly see their current location.

[0060] After the highlight animation is executed, the system provides visual feedback to the user, indicating that they have reached the target location. This mechanism further enhances the user's interactive experience, letting them know that they have successfully navigated to the expected location and increasing the friendliness and ease of use of the page.

[0061] Secondly, a system for positioning page anchors and highlighting animations based on the React project:

[0062] like Figure 2 As shown, the system comprises:

[0063] (1) Responsible for initializing the loading anchor information array when the user visits the web page; after the page is loaded, register the scroll event listener to prepare for subsequent scroll monitoring and highlight animation.

[0064] (2) In the JSX structure of the component, use the negative anchor registration and management module of the custom Hooks to register the anchor; assign a ref to a specific DOM element and call the registration function to add it to the state management. During the registration process, the component state is updated and all declared anchor information (ID, DOM reference, and style) is recorded.

[0065] (3) A user interaction processing module responsible for monitoring the user's click on a navigation link or button on the page; after receiving the interaction event, the corresponding anchor point information is searched according to the clicked target.

[0066] (4) A smooth scrolling and positioning module that calculates the scroll offset based on the position of the target anchor DOM element; uses JavaScript's scrolling API (such as scrollIntoView) to start smooth scrolling to the target position. Set the animation duration and easing effect to ensure that the scrolling process is smooth and natural.

[0067] (5) A viewport monitoring and highlighting module that monitors the relationship between each anchor DOM element and the viewport; once the target element enters the viewport or approaches the edge of the viewport, a callback is triggered. Based on the monitoring results, the previously set highlight style is applied to the corresponding anchor element. At the same time, the highlight status of other anchors is canceled to ensure a clear visual focus.

[0068] (6) An interactive feedback module that provides visual feedback to users; the feedback can be in the form of changing element color, adding animation effects, displaying icons or text prompts, etc. Ensure that users can clearly recognize that they have reached the target location.

[0069] (7) A processor connected to all the above modules and a memory connected to the processor, wherein the memory stores program instructions, and when the program instructions are executed by the processor, the processor executes the method for locating the page anchor point and highlighting the animation as described above.

[0070] Compared with the prior art, the present invention has the following beneficial effects:

[0071] 1. Improve user experience: Through smooth scrolling and highlighting, the present invention allows users to clearly see their current location and other important anchor points on the page. The interactive feedback mechanism ensures that users can instantly know the results of their operations, enhancing the interactivity and usability of the page.

[0072] 2. Enhance the intuitiveness of page navigation: The highlighting and window monitoring functions of the anchor point of the present invention make page navigation more intuitive and easy to understand. Users can quickly locate the content they are interested in without blindly searching in the page. The initialization loading module ensures that the page can efficiently process the anchor point information when loading, avoiding unnecessary delays. The user interaction processing module can respond to the user's click event immediately and quickly locate the target anchor point. BRIEF DESCRIPTION OF THE DRAWINGS

[0073] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or technical descriptions will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0074] Figure 1 It is a schematic diagram of the method flow of the present invention;

[0075] Figure 2 It is a schematic diagram of the system composition of the present invention. DETAILED DESCRIPTION

[0076] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below;

[0077] It should be noted that the various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.

[0078] Embodiment 1: Figure 1 As shown, this embodiment discloses a method for positioning and highlighting the page anchor based on the React project; this embodiment will explain the technical content of the solution in detail in the form of an online document reading application. Assume that in an online document reading application, after the user clicks a chapter link in the directory, the page will scroll smoothly to the starting position of the corresponding chapter, and the title of the chapter will have a highlighted animation effect to highlight the current reading position. The specific implementation steps of the solution include the following steps S1 to S6.

[0079] In this embodiment, regarding step S1, initialization loading:

[0080] When a user visits a web page that contains this function, the React component starts to load the information array about the anchor and initialize it. After the page is loaded, the scroll event listener is registered to prepare for subsequent scroll monitoring and highlight animation.

[0081] Step S100, initialization of anchor information array: When a user visits the webpage of the online document reading application, the lifecycle method of the React component (such as the useEffect hook) is triggered. Initialize a state variable (such as chapterAnchors) to store the information array of the chapter anchor. This array is initially empty, indicating that there is no anchor information. Each element in the anchor information array is an object, containing the chapter id, the corresponding DOM reference (ref), the DOM reference of the chapter title (titleRef), and the style information when highlighting (such as CSS class).

[0082] Step S101, register a scroll event listener: After the page is loaded (i.e. in the useEffect hook of the React component), use the window.addEventListener method to register a scroll event listener. The listener will be triggered when the user scrolls the page, and is used for subsequent scroll monitoring and highlight animation preparation. In the listener callback function, the current scroll position can be obtained, and the anchor state can be updated or the highlight animation can be triggered based on this position.

[0083] In this embodiment, regarding step S2, anchor registration: in the JSX structure of the component, the anchor is registered using custom Hooks. During the registration process, the component state is updated so that all declared anchor information (ID, DOM reference and style) are recorded.

[0084] Step S200, create custom Hooks: Create a custom Hooks (such as useChapterAnchor) to register and manage chapter anchors in the component. The Hooks receives the chapter id, the title DOM reference (titleRef) and the highlight style as parameters, and returns a ref object for associating a specific DOM element (i.e. the start position of the chapter). Inside the Hooks, useState or useRef is used to store and manage the state of the anchor.

[0085] Step S201, using custom Hooks in the JSX structure: In the JSX structure of the component, use the ref returned by the custom Hooks for the DOM element that needs to be registered as a section anchor. For example, <div ref＝{chapterref}>, where chapterRef is the ref object returned by useChapterAnchor Hooks, representing the starting position of the chapter. At the same time, a ref is also set for the chapter title, such as<h2ref={titleRef}> The chapter title, where titleRef is passed to

[0086] The title DOM reference for the useChapterAnchor Hooks.

[0087] Step S202, call the registration function and update the component state: In the custom Hooks or components, call a registration function (such as registerChapterAnchor) to add the chapter id, the DOM reference of the starting position, the DOM reference of the title, and the highlight style information to the state management. After updating the component state, all declared chapter anchor information will be recorded in the component state for subsequent use.

[0088] In this embodiment, regarding step S3, user interaction:

[0089] When a user clicks a navigation link or button on a page, the component receives the interaction event and searches for the corresponding anchor information based on the clicked target.

[0090] Step S300, monitoring user interaction events: In the React component, add an event listener, such as an onClick event, to each chapter link in the directory. When the user clicks on these links, the corresponding event processing function will be triggered.

[0091] Step S301, obtaining information of the click target: in the event processing function, obtain relevant information of the clicked element through the event object (such as e or event). This information includes the element's id or other custom attributes, which are used to identify the chapter anchor point that the user wants to navigate to.

[0092] Step S302, search for corresponding anchor information: Use the information obtained in the previous step to search for corresponding chapter anchor information in the state or context of the component. After the corresponding anchor information is found, subsequent smooth scrolling and positioning operations can be performed.

[0093] In this embodiment, regarding step S4, smooth scrolling and positioning: the positioning controller calculates the scrolling offset according to the position of the target anchor DOM element. Using JavaScript scrolling API

[0094] (scrollIntoView) starts smooth scrolling to the target position, including the settings of animation duration and easing effect.

[0095] Step S400, calculating the scroll offset: the positioning controller first obtains the position information of the target chapter anchor DOM element, and then calculates the scroll offset, that is, the difference between the current scroll position and the target chapter anchor position.

[0096] Step S401, configure scrolling animation parameters: configure scrolling animation parameters, including animation duration and easing effect. Animation duration determines the duration of the scrolling animation. Easing effect affects the acceleration and deceleration of the scrolling animation, making the scrolling look more natural and smooth.

[0097] Step S402, perform smooth scrolling to the target position: Use JavaScript's scrolling API (such as scrollIntoView) to start smooth scrolling. The calculated scroll offset, animation duration, and easing effect are passed as parameters to the scrolling API to control the behavior of the scrolling animation. The scrolling API will be responsible for smoothly scrolling the page to the starting position of the target chapter.

[0098] In this embodiment, regarding step S5, window monitoring and highlighting: monitor the relationship between each anchor DOM element and the viewport, and trigger a callback once the target element enters the viewport or approaches the edge of the viewport. According to the monitoring results, apply the previously set highlight style to the corresponding anchor element, and cancel the highlight status of other anchors to ensure a clear visual focus.

[0099] Step S500, monitor the relationship between the anchor and the viewport: Use JavaScript's Intersection Observer API to monitor the relationship between each chapter anchor DOM element and the viewport. Create an observer instance for each anchor element and configure the corresponding observation options, including root element, rootMargin, and threshold. The observer will asynchronously monitor the intersection changes between the anchor element and the viewport and trigger a callback when a change occurs.

[0100] Step S501, trigger callback and apply highlight style: When the target chapter anchor element enters the viewport or approaches the edge of the viewport, the observer will trigger a callback. In the callback function, the previously set highlight style is applied to the corresponding chapter title element, that is, the CSS class of the element is modified.

[0101] Step S502, cancel the highlight state of other anchor points: by traversing all chapter anchor point elements and removing their highlight styles, while highlighting the current chapter anchor point element, it is necessary to cancel the highlight state of other anchor points to ensure a clear visual focus. It is also possible to reset the styles of all anchor points before highlighting the current anchor point, and then apply the highlight style to the current anchor point.

[0102] In this embodiment, regarding step S6, interactive feedback: after the highlight animation is executed, provide visual feedback to the user, indicating that the target chapter position has been reached. The feedback form can be changing the color of the chapter title, adding animation effects, displaying icons or text prompts, etc. Ensure that the user can clearly recognize that they have reached the starting position of the target chapter.

[0103] In this embodiment, the front-end React component program involved in all the above steps is as follows:

[0104]

[0105]

[0106]

[0107]

[0108]

[0109] In the above program:

[0110] Initialization and anchor registration (S1, S2): Use useState to create the chapterAnchors state to store chapter anchor related information. In the useEffect hook, according to the incoming chapters data, create an object containing id, ref (associated chapter DOM element), titleRef (associated chapter title DOM element) and highlightStyle (highlight style) for each chapter, and store these objects in the chapterAnchors state. Through the ref attribute, the DOM elements of the chapter and title are associated with the corresponding anchor objects.

[0111] User interaction and smooth scrolling (S3, S4): The scrollToChapter function is defined to be triggered when the user clicks a chapter link in the directory. This function finds the corresponding anchor point in chapterAnchors according to the clicked chapter ID, and uses the scrollIntoView method to achieve smooth scrolling to the chapter position corresponding to the anchor point.

[0112] Window monitoring and highlighting (S5): In the useEffect hook, the handleScroll function is defined to monitor the scrolling event of the window. When the window scrolls, the handleScroll function will traverse all anchors and check whether the corresponding chapter elements enter the viewport. If a chapter element enters the viewport, the highlight of other anchors will be canceled and the title of the current anchor will be set to the highlighted state.

[0113] Interactive feedback (S6): Highlight the chapter title in the current viewport as a visual feedback that the user has reached the target chapter position.

[0114] All the above embodiments only express the implementation methods of the relevant practical applications of the present invention, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention. Therefore, the protection scope of the patent of the present invention shall be based on the attached claims.

[0115] For those skilled in the art, it can be further appreciated that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0116] At the same time, those skilled in the art can understand that all or part of the processes in all the above-mentioned embodiments can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media provided in this application and used in the embodiments may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (SSRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

Claims

1. A method for positioning page anchors and highlighting animations based on the React project, characterized in that: The steps include: S1, when the user visits the webpage containing this function, the React component starts to initialize and load the information array about the anchor point; after the page is loaded, the scroll event listener is registered; S2, in the component's JSX structure, use custom Hooks to register anchors; During the registration process, the component status is updated so that all declared anchor information is recorded; S3: The user clicks a navigation link or button on the page. The component receives the interaction event and searches for the corresponding anchor information based on the clicked target. S4, the positioning controller calculates the scroll offset according to the position of the target anchor DOM element, and uses the JavaScript scrolling API to start smooth scrolling to the target position; S5, once the target element enters the viewport or approaches the edge of the viewport, the callback is triggered; according to the monitoring results, the previously set highlight style is applied to the corresponding anchor element, and the highlight status of other anchors is canceled; S6, interactive feedback: The highlight animation is executed and provides visual feedback to the user.

2. The method for locating a page anchor point and highlighting an animation according to claim 1, characterized in that: The specific implementation method of S1 includes: S100, when a user visits a web page containing this function, the lifecycle method of the React component is triggered, and the state variable is initialized to store the information array of the anchor point; S101, after the page is loaded, a scroll event listener is registered using the window.addEventListener method; in the callback function of the listener, the current scroll position is obtained, and the state of the anchor point is updated or a highlight animation is triggered according to the position.

3. The method for locating a page anchor point and highlighting an animation according to claim 1, characterized in that: The specific implementation method of S2 includes: S200, create a custom Hooks for registering and managing anchors in the component; the Hooks receives the ID and style of the anchor as parameters and returns a ref object. Use useState or useRef inside the Hooks to store and manage the state of the anchor; S201, in the JSX structure of the component, use the ref returned by the custom Hooks for the DOM element that needs to be registered as an anchor.

4. The method for locating a page anchor point and highlighting an animation according to claim 3, characterized in that: In custom Hooks or components, call a registration function to add the anchor ID or DOM reference and style information to the state management; after updating the component state, all declared anchor information will be recorded in the component state for subsequent use.

5. The method for locating a page anchor point and highlighting an animation according to claim 1, 2 or 3, characterized in that: The specific implementation method of S3 includes: S300, in the React component, add event listeners for navigation links or buttons; S301, in the event processing function, obtain relevant information of the clicked element through the event object to identify the anchor point to which the user wants to navigate.

6. The method for locating a page anchor point and highlighting an animation according to claim 5, characterized in that: Based on the anchor ID, DOM reference and style provided by S2, use the information obtained in the previous step to find the corresponding anchor information in the component state or context, and perform subsequent smooth scrolling and positioning operations after finding the corresponding anchor information.

7. The method for locating a page anchor point and highlighting an animation according to claim 1, 2 or 3, characterized in that: The specific implementation method of S4 includes: S400, the positioning controller first obtains the position information of the target anchor DOM element; then the controller calculates the scroll offset; S401, configuring the parameters of the scrolling animation, including the animation duration and the easing effect; S402, perform smooth scrolling; pass the calculated scroll offset, animation duration, and easing effect as parameters to the scrolling API to control the behavior of the scrolling animation.

8. The method for locating a page anchor point and highlighting an animation according to claim 7, characterized in that: The specific implementation method of S5 includes: S500,uses JavaScript’s Intersection Observer API to monitor the relationship between each anchor DOM element and the viewport; S501, when the target anchor element enters the viewport or approaches the edge of the viewport, the observer will trigger a callback; in the callback function, determine which anchor element should be highlighted according to the detection result; apply the previously set highlight style to the corresponding anchor element, that is, modify the CSS class of the element; S502, traverse all anchor elements and remove their highlight styles.

9. A system for page anchor positioning and highlighting animation based on the React project, characterized by: The system includes a processor and a memory connected to the processor, wherein program instructions are stored in the memory. When the program instructions are executed by the processor, the processor executes the method for locating a page anchor point and highlighting an animation as described in any one of claims 1 to 8.

10. The system for locating page anchor points and highlighting animation according to claim 9, characterized in that: The system further comprises: The initialization loading module is responsible for initializing the information array of the loading anchor point when the user visits the web page; In the JSX structure of the component, use custom Hooks to register the negative anchor registration and management module of the anchor; A user interaction processing module responsible for monitoring the user's click on the navigation link or button on the page; a smooth scrolling and positioning module that calculates the scroll offset based on the position of the target anchor DOM element; A viewport monitoring and highlighting module that monitors the relationship between each anchor DOM element and the viewport; An interactive feedback module that provides visual feedback to the user.

Images