html5锚点链接代码
在HTML5中，可以使用锚点链接来实现页面内的跳转。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Links</title>
</head>
<body>
<h1>Anchor Links Example</h1>
<p><a href="#section1">Go to Section 1</a></p>
<p><a href="#section2">Go to Section 2</a></p>
<h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>
<h2 id="section2">Section 2</h2>
<p>This is the content of section 2.</p>
</body>
</html>
在这个示例中，我们创建了两个锚点链接，分别链接到页面中的两个部分。每个部分都有一个带有唯一ID的标题标签，在链接中，我们使用#符号后跟相应部分的ID来创建锚点链接。
点击"Go to Section 1"会跳转到ID为"section1"的部分，点击"Go to Section 2"会跳转到ID为"section2"的部分。
如果你想要在链接中添加平滑滚动效果，可以使用JavaScript来实现。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Anchor Links</title>
<style>
/* 添加样式以美化页面 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
h1, h2 {
margin-top: 40px;
}
h2 {
margin-top: 20px;
}
p {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Smooth Anchor Links Example</h1>
<p><a class="smooth-scroll" href="#section1">Go to Section 1</a></p>
<p><a class="smooth-scroll" href="#section2">Go to Section 2</a></p>
<h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>
<h2 id="section2">Section 2</h2>
<p>This is the content of section 2.</p>
<script>
// 添加平滑滚动效果的JavaScript代码
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
document.querySelector(targetId).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
在这个修改后的示例中，我们使用了JavaScript来监听所有以#开头的锚点链接，当点击这些链接时，页面会平滑滚动到相应的部分。这种平滑滚动效果通过scrollIntoView方法的behavior选项设置为smooth来实现。
