preface
Sometimes, we want to read some wonderful content in the page, but because the page is too long, the user needs to scroll the page, it is very troublesome to find 😭, it is easy to lose the interest of continuing to read. This experience is very bad, so we can find a way to 💡 to click a paragraph of text or picture to jump to the designated location of the page, convenient for users to read.
First, pure HTML implementation
1. Use an anchor point marked with an ID
The label that serves as the anchor point here can be any element.
<a href="#aa"> Jump to anchor point marked aa </a>
<p>------------- dividing line -------------</p>
<div id="aa">a</div>
Copy the code2. Use the name attribute of the A tag as the anchor point
The label used as the anchor point here can only be the A label.
<a href="#bb"> jump to a tag anchor with name bb </a>
<p>------------- dividing line -------------</p>
<a name="bb"</a> </a>
<div id="abb">bbb</div>
Copy the codeNote: when both ‘a tag name attribute as anchor’ and ‘anchor marked with ID’ occur (i.e., anchor named with name and anchor named with ID have the same name), the latter will be used as the anchor.
Second, JS implementation
1. Using the scrollTo ()
Window.scrollto Scrolls to a coordinate in the document. Sliders are available. For details about scrollTo(), see the introduction in MDN.
Without further ado, look at the following code 👇
“HTML section” :
<a id="linkc"> Smooth scroll to C </a>
<p>------------- dividing line -------------</p>
<div id="cc">c</div>
Copy the code“Js part” :
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl specifies the DOM node to jump to
let bridge = toEl;
let body = document.body;
let height = 0;
// Calculate the distance from the DOM node to the top of the body
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while(bridge ! == body)
// Scroll to the specified position
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click'.function () {
to(cc)
});
Copy the code2. Use scrollIntoView ()
The element.scrollintoView () method scrolls the current Element into the viewable area of the browser window. To learn more about scrollIntoView(), see the introduction in MDN.
Below also directly on the code 👇
“HTML section” :
<a onclick="goTo()"> Jump to d</a> with scrollIntoView
<p>------------- dividing line -------------</p>
<div id="dd">ddd</div>
Copy the code“Js part” :
var dd = document.querySelector('#dd')
function goTo() {
dd.scrollIntoView()
}
Copy the codeNote: some browsers are still developing this feature, please refer to the browser compatibility table to see which prefixes are appropriate for different browsers. The syntax and behavior of this feature may change in future versions of browsers as the standard documentation for this feature may be revised.
Let’s put the above code together to make it easier to see.
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa"> Jump to anchor a marked with id aa </a>
<p>------------- dividing line -------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb"> jump to a tag anchor with name bb </a>
<p>------------- dividing line -------------</p>
<a name="bb"</a> </a>
<p>------------- dividing line -------------</p>
<div>bb</div>
<a id="linkc"> Smooth scroll to C </a>
<p>------------- dividing line -------------</p>
<div id="cc">cc</div>
<a onclick="goTo()"> Jump to d</a> with scrollIntoView
<p>------------- dividing line -------------</p>
<div id="dd">dd</div>
<p>------------- dividing line -------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele specifies the DOM node to jump to
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while(bridge ! == body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click'.function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo() {
dd.scrollIntoView()
}
</script>
</html>
Copy the codeEffect:
