Now there are more and more scenarios in which web pages use scrollbars to display content, but when the content is too long, users will not know where to scroll to, do not understand the page architecture, and can not quickly locate the information they need to view. This problem can be solved by associating the window scrollbar with the corresponding button on the nav bar.
Features to be Realized
1. When the window scrolls, if it scrolls to a certain position, the corresponding button on the right navigation bar will be selected.
2. When the button on the right is clicked, the window will scroll to the appropriate position.
How to Realize these Features
By adding hot spots to different parts of the page.
1. When the window scrolls, judge the ScrollY of window and the position of hot zone. Then select the corresponding button on the left navigation bar.
2. When clicking the button on the navigation bar, the window will scroll to the position of the corresponding hot zone.
1. Drag 3 rectangles into the canvas. Set the styles and texts of the rectangles, and set MouseOver style and Selected style. Name the three rectangles Top, Limited and More respectively.
2. Select three buttons, right-click and set the selection group to Side.
3. Create three buttons as dynamic panels. Pin it to the right and middle of the browser.
4. Cover hot spots for different areas of the page. We cover three hotspots here, named 1, 2 and 3 respectively.
1. Set when Window scrolled, if the Y coordinate of the scroll bar is less than the Y coordinate (top) of hot spot 2, select the Top button; If it is greater than or equal to the Y coordinate of hot spot 2 and less than the Y coordinate of hot spot 3, select the Limited button; If it is greater than the Y coordinate of hot spot 3, select the More button.
2. Set the same interaction when Page Loaded.
3. Select the button Top on the navigation bar, set the current button to be selected when the button is clicked, and scroll to the corresponding hot spot 1.
4. Set similar interactions for all buttons on the navigation bar.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.