Jquery enables webpage positioning and navigation

Jquery enables webpage positioning and navigation

I don't know if you have noticed that some webpages use the page positioning and navigation to redirect due to the huge page information. Click a page next to the menu to jump to the corresponding content, in addition, when the scroll bar is rolled to a specific item, the item corresponding to the next menu is highlighted. Today I will talk about how this effect is achieved.

First paste the display effect:

Implementation:
The page layout is very simple. If you try more, you will be OK, it is worth noting that you need to add the label to each li in the menu layout and assign the corresponding id number to the href of the a label, so that it can click to jump to the corresponding content of the id immediately.

Then there is how jquery implements it:

1. We need to use $ (document). scrollTop () to get the height of the scroll bar relative to the top.

2. by $ ('# content '). find ('. item ') [index]. offset (). top: Get the height of each piece of content relative to the top. (In the div with id as content, five class as item, each item corresponds to the content of one section)

3. then compare the $ (document) of each section ). whether scrollTop () is greater than $ ('# content '). find ('. item ') [index]. offset (). top. If the value is greater than that, the page has already come to the corresponding section.

4. Remove the previous highlight using removeClass and add addClass to the corresponding item.

Code:

Below is a specific demo I wrote for your reference:
Index.html

<! DOCTYPE html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.