HTML文档描点

文档描点

 

　　通过a标签跳转到指定的文档位置, 通过href属性页面滚动到指定的标签id上

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                height: 900px;
            }
            #div1{
                background-color: aqua;
            }
            
            #div2{
                background-color: salmon;
            }
        </style>
    </head>
    <body>
        <a href="#div1">去到idv1</a>
        <a href="#div2">div2</a>
        <div id="div"></div>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </body>
</html>
复制代码

有时候可能是节点样式设置问题, 上面的方法不灵光, 可以使用js脚本控制

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                height: 900px;
            }
            #div1{
                background-color: aqua;
            }
            
            #div2{
                background-color: salmon;
            }
        </style>
        <script src="src/js/jquery_min.js"></script>
    </head>
    <body>
            <a data-id="div1">去到idv1</a>
            <a data-id="div2">div2</a>
            <div id="div"></div>
            <div id="div1" >div1</div>
            <div id="div2">div2</div>
            
            <script>
                $("a").click(function() {
                        var id = this.getAttribute("data-id");
                        $("html,body").animate({scrollTop:$("#"+id).offset().top},1000)
                })
            </script>
    </body>
</html>
复制代码

 

posted @   花先生。  阅读(165)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
历史上的今天：
2019-07-08 js的Map实例
点击右上角即可分享
微信分享提示
SQL AI 助手