极客教程HTML 滚动/跳转到指定ID但不使用jQuery
在本文中，我们将介绍如何在HTML中实现滚动到指定ID的功能，而不使用jQuery。滚动到指定ID的功能是网页开发中常见的需求，可以通过一些简单的HTML和JavaScript代码来实现。
阅读更多：HTML 教程
实现基础跳转功能
首先，我们需要创建一个基本的HTML文档，并设置好目标位置的ID。可以使用锚点来实现跳转功能，通过给目标位置的ID添加id属性，然后在导航菜单或其他链接中设置跳转的链接。
下面是一个例子：
<!DOCTYPE html>
<html>
<head>
<title>Scroll/Jump to ID</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first section.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is the third section.</p>
</section>
</main>
</body>
</html>
在上面的例子中，导航菜单中的链接会跳转至对应的id所在的位置，即相应的section标签。
添加平滑滚动效果
上面的例子中，点击链接会直接跳转到目标位置，没有平滑滚动的效果。若要添加平滑滚动效果，可以使用JavaScript来实现。
下面是一个使用原生JavaScript实现平滑滚动效果的例子：
<!DOCTYPE html>
<html>
<head>
<title>Scroll/Jump to ID</title>
<style>
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first section.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section.</p>
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is the third section.</p>
</section>
</main>
<script>
// 添加平滑滚动效果
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
在上面的例子中，通过为html元素添加scroll-behavior: smooth;样式，可以实现平滑滚动效果。使用querySelectorAll()方法选取所有的锚点链接，然后为每个链接添加点击事件，点击时执行平滑滚动的代码。
使用JavaScript库
除了使用原生JavaScript，我们还可以使用其他JavaScript库来实现滚动到指定ID的功能。以下是一些常用的JavaScript库：
– Scrollama
– Smooth Scrollbar
– Iscroll
使用这些库可以更方便地实现滚动到指定ID的功能，并且提供了更多的定制选项。
总结
本文介绍了在HTML中实现滚动/跳转到指定ID的功能，包括基础的锚点跳转和添加平滑滚动效果的方法。通过简单的HTML和JavaScript代码，我们可以实现网页中常用的滚动到指定ID的功能，无需依赖jQuery或其他第三方库。如果需要更多的定制选项，也可以使用一些流行的JavaScript库来简化开发。希望本文对您有所帮助！