zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Python 第八章笔记
    B树和B+树的总结
    哈希表总结
    Redis基本数据结构总结之STRING和LIST
    红黑树之删除原理和实现
    红黑树之插入实现
    对排名前3000位博主进行数据分析
    o(n)线性排序算法
    排序算法总结
    贪心算法 题型总结
  • 原文地址:https://www.cnblogs.com/yangWanSheng/p/14985406.html
Copyright © 2011-2022 走看看