在HTML中实现点击锚点快速跳转并平滑滚动到页面位置通常需要使用JavaScript。以下是一些实现点击锚点平滑滚动的示例代码：
<!-- 创建带有链接的锚点 -->
<a href="#section1">跳转到Section 1</a>
<!-- 创建需要跳转的页面部分 -->
<div id="section1">
<h2>Section 1</h2>
<p>这是页面上的一个部分</p>
</div>
<!-- 在 <head> 部分引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<!-- 使用 jQuery 代码实现平滑滚动效果 -->
<script type="text/javascript">
$(document).ready(function(){
// 当页面上的任意锚点被点击时
$('a[href^="#"]').on('click',function (e) {
e.preventDefault(); // 阻止默认链接跳转行为
var target = this.hash; // 获取锚点的目标位置
var $target = $(target); // 将目标位置转换成 jQuery 对象
// 平滑滚动到位置
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target; // 更新 URL 中的锚点
});
});
});
</script>上述代码需要在页面头部引入 jQuery，然后使用 jQuery 代码绑定锚点的点击事件，当锚点被点击时，通过 jQuery 实现页面的平滑滚动效果。需要注意的是，代码中的 900 是平滑滚动的时间长度，单位为毫秒。可以根据需要调整该值来改变平滑滚动的速度。
另外，有些浏览器（如 Chrome）会自带平滑滚动效果，因此该代码不一定在所有浏览器上都会生效。在这种情况下，可以考虑使用 CSS 的 scroll-behavior 属性，该属性可以实现在 Chrome 等浏览器上的平滑滚动效果。具体代码如下：
/* 添加滚动行为，实现平滑滚动效果 */
html {
scroll-behavior: smooth;
}