在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;
}