The basic implementation method of anchor point
1. Access the A label
Add id to p tag
<p id = 'jumpto'> I want to jumpto here </p>
And then bind that ID with an A tag href
<a href = '#jumpto'> click here to jumpto the id location </a>
Write a testable HTML that looks like this
< br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < a href = '# jumpto > click here to jump to the location of the id < / a > <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> < br > < br > < br > < br > < br > < p id = 'jumpto' > probably can jump here < / p > < br > < br > < br > < br > < br > < br > < br >Copy the codeHowever, the downside of this is that when you jump, you go straight to the target. It’s ugly
2. Find DOM via querySelector and jump to it using scrollIntoView
It’s the same P tag, it’s the same ID
<p id = 'jumpto'> I want to jumpto here </p>
And then find that id with a js querySelector
const jump = document.querySelector('#jumpto');
Then jump using the Jump scrollIntoView method
jump.scrollIntoView();
Write a testable HTML that looks like this
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < / head > < body > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > <button onclick=jumpjump()> </button> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> < br > < br > < br > < br > < br > < p id = 'jumpto' > probably can jump here < / p > < br > < br > < br > < br > < br > < br > < br > < / body > < script > function jumpjump () { const jump = document.querySelector('#jumpto'); jump.scrollIntoView(); } </script> </html>Copy the codeWouldn’t it be equally jarring if someone copied this and went down and tested it
So we’re going to use this property that’s in our scrollIntoView, so let me introduce you
1, behaviors,
There are several uses for this property
jump.scrollIntoView({behavior:”auto”}); This is the default is to just jump over it
jump.scrollIntoView({behavior:”instant”}); What does the word instant mean? Instant! For him it is the same as the first method, I do not know why to make two properties with the same effect
jump.scrollIntoView({behavior:”smooth”}); So what we’re left with is a scrolling animation
2, block,
jump.scrollIntoView({block:”start”}); This is a jump that puts the jump’s target at the top of the screen
jump.scrollIntoView({block:”center”}); This is a jump that puts the target of the jump in the middle of the screen
jump.scrollIntoView({block:”end”}); This is a jump that puts the target of the jump at the bottom of the screen
jump.scrollIntoView({block:”nearest”}); Don’t really know how to use it, you know
3, the inline
This one also has the above four attributes, but honestly I still don’t know how to use it. So I won’t go into details.
Here is the test code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> </head> <body> < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < button onclick = jumpMeiDongHua () > click here no animation jump < / button > < br > < button </button onclick=jumpStart()> </button onclick=jumpStart()> </button onclick=jumpCenter()> </button onclick=jumpEnd()> </button onclick=jumpCenter()> </button><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br> <button onclick=jumpTop()> Return to the top </button> <p id = 'jumpto' Onclick =jumpTop()> Return to top </button> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br>< body> <script> // Jump method without animation function jumpMeiDongHua(){const jump = document.querySelector('#jumpto'); jump.scrollIntoView(); } function jumpYouDongHua(){const jump = document.querySelector('#jumpto'); jump.scrollIntoView({behavior:"smooth"}); } function jumpStart(){const jump = document.querySelector('#jumpto'); jump.scrollIntoView({block: "start"}); } function jumpCenter(){const jump = document.querySelector('#jumpto'); jump.scrollIntoView({block: "center"}); Function jumpEnd(){const jump = document.querySelector('#jumpto'); jump.scrollIntoView({block: "end"}); } function jumpTop(){const jump = document.querySelector('#top'); jump.scrollIntoView({block: "center",inline: "end"}); } </script> </html>Copy the codeThe implementation method of dynamic anchor point
So the anchor point knows what to do, and now it’s time to do the dynamic anchor point, okay
First of all, what does that mean
Your article has a title directory, and then put this directory next to the article, you click it jump. That’s when you need something, you need a highlight in the directory to show you where you jumped to. Then scroll up and down to the next directory, and the highlight will follow. So this is the dynamic anchor. If you don’t understand, look to the left of 👈, or to the right of 👉 if you’re on the Nuggets. This directory is made of dynamic anchors.
So let’s start with what I did at the beginning
To begin with, I was swept to web pages: the document. The documentElement. ScrollTop as a judge If more than this, is less than that, the page is activated which style. Greater than the other one this, less than the other one that, activate another style
But here’s the problem:
If the page is the same size then you’re going to see how much scrolling it is, which is not what you wrote in the code in the first place.
So what to do:
Document.queryselector (‘#ID’).getClientRects()[0].y to get the current height of the element And this doesn’t change with scale, so I just have to calculate the height of each paragraph, the height of half the screen. Since I use scrollIntoView({block: “Center “}) to scroll, I need to count elements halfway through to activate the current menu.
Let’s copy the code directly from the VUE project
let top = document.querySelector('#top').getClientRects()[0].y let limit let half = (window.screen.availHeight -100)/2 Let zz = document.querySelector('#bot').getClientRects()[0].y Limit is used to determine the height of the last menu activated when the last paragraph is less than half the screen height. Used to calculate the height of the last paragraph the if (this. ProfileInfo. MunNum [0]) {/ / this. ProfileInfo. This is the interface incoming munNum menu array according to the number of menu to create highly determine var aa = document.querySelector('#one').getClientRects()[0].y if (aa < half&&top! If (this.profileInfo.munnum [1]){var bb =0){this.isActive = 1}}if(this.profileInfo.munnum [1]){var bb =0 Document.queryselector ('#two').getClientRects()[0].y if (bb < half){this.isActive = 2 // Activate menu style} if (! This.profileinfo.munnum [2]){// When this is the last menu const secondLastLength = bb-aa // This is the penultimate segment of the high const lastLength = zz-bb If (secondLastLength>half&&lastLength>half){limit = half} else if(secondLastLength<half&&lastLength>80){ limit = half - lastLength }else if(secondLastLength>half&&lastLength>80){ limit = half - (secondLastLength-lastLength) }else{ limit = half - 80 } if(bb<limit){ this.isActive = 2 } } }Copy the code