文章目录章节滚动定位导航-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航进度</title>
    <meta name="description" content="导航进度,滚动定位,锚点导航">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
            box-sizing: border-box;
        }

        body {
            font-size: 16px;
            line-height: 1.6;
            font-family: 'Roboto', sans-serif;
        }

        .toc {
            position: fixed;
            left: 3em;
            top: 5em;
            padding: 1em;
            width: 14em;
            line-height: 2;
        }
        .toc ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .toc ul ul {
            padding-left: 2em;
        }
        .toc li a {
            display: inline-block;
            color: #aaa;
            text-decoration: none;
            -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .toc li.visible > a {
            color: #111;
            -webkit-transform: translate(5px);
            -ms-transform: translate(5px);
            transform: translate(5px);
        }

        .toc-marker {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        .toc-marker path {
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        .contents {
            padding: 1em;
            max-width: 800px;
            font-size: 1.2em;
            font-family: 'Frank Ruhl Libre', sans-serif;
            margin-left: 230px;
        }
        .contents img {
            max-width: 100%;
        }
        .contents .code-block {
            white-space: pre;
            overflow: auto;
            max-width: 100%;
        }
        .contents .code-block code {
            display: block;
            background-color: #f9f9f9;
            padding: 10px;
        }
        .contents .code-inline {
            background-color: #f9f9f9;
            padding: 4px;
        }
        .contents h2
        h3 {
            padding-top: 1em;
        }
        .contents h2 {
            margin-top: 1.2em;
        }

@media screen and (max-width: 1200px) {
            body {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <nav class="toc">
        <ul>
            <li><a href="#intro">第一章</a></li>
            <li>
                <a href="#dev">第二章</a>
                <ul>
                    <li><a href="#dev-edit-html">春</a></li>
                    <li><a href="#dev-element-classes">夏</a></li>
                    <li><a href="#dev-slide-classes">秋</a></li>
                    <li><a href="#dev-export-html">冬</a></li>
                </ul>
            </li>
            <li>
                <a href="#css">第三章</a>
                <ul>
                    <li><a href="#css-fonts">高端</a></li>
                    <li><a href="#css-developer-mode">大气</a></li>
                    <li><a href="#css-examples">上档次</a></li>
                </ul>
            </li>
        </ul>
        <svg class="toc-marker" width="200" height="200">
            <path stroke="#444" stroke-width="3" fill="transparent" stroke-dasharray="0, 0, 0, 1000" stroke-linecap="round" stroke-linejoin="round" transform="translate(-0.5, -0.5)" />
        </svg>
    </nav>

    <article class="contents">
        <section id="intro">
            <h2>第一章</h2>

            <h2>匝</h2>
            <p>
                一个男子失恋以后，要么自杀，要么再恋一次爱，而第二次找对象的要求往往相近于第一个，这种心理是微妙的，比如一样东西吃得正香，突然被人抢掉，自然要千方百计再想找口味相近的——这个逻辑只适用于女方背叛或对其追求未果。若两人彼此再无感情，便不存在这种“影子恋爱”，越吃越臭的东西是不必再吃一遍的。
            </p>
            <p>
                占着茅坑不拉屎是可恶的，其实，最可恨的却是拉完了屎还要占着等坑。
            </p>

            <h2>涸</h2>
            <p>
                数理化语文英语全很好，音乐体育计算机都零分，连开机都不会，我还是一个优等生。但如果我音乐体育计算机好得让人发指，葡萄牙语说得跟母语似的，但是数学英语和化学全不及格，我也是个差生。 <a href="#dev">公司的时代</a>.
            </p>
            <p>
                我在上学的时候，喜欢踢球。有人讽刺我说再踢也踢不到国家队，踢再好也好不过罗纳尔多，踢了有什么意思。不许踢了。
                那么，如果你自己喜欢开车，我对你说，你再开也开不到麦克拉伦车队去，开再快也快不过舒马赫，开了有什么意思，驾照没收了
            </p>
        </section>

        <section>
            <div id="dev">
                <h2>第二章</h2>
                <p>
                    春天，是一个充满勃勃生机的季节，是一个孕育无限希望的季节，是一个放飞童趣和梦想的季节。走进春天，我们要热爱春天，要张开双臂拥抱春天！
                </p>
                <p>
                    你说地面上这么热闹，天上也是不是很热闹呢？那当然。整天燕子和大雁比个不停，“春天相当于是我的出生的那天，它给我美好的生活。”燕子带着感激地说。这是大眼迫不及待地说：“我觉得春天相当于是我的父母，因为春天是让我们最不会受到折磨的一个季节。”“我觉得……”“我觉得……”两群的队长，嘿，整天比个不停，看来天上的确很热闹的。
                </p>

             
            </div>

            <div id="dev-edit-html">
                <h3>春天在哪里</h3>
                <p>
                    中午时阳光越发猛烈，仿佛一阵燃烧的火焰炽热你的灵魂。我喜欢跑到空旷的操场享受阳光。当我走在林荫道上，树叶点点的缝隙间便投射又一缕阳光，一个个扭曲的身影摇逸着，投下斑斑点点的阳光的身影。
                    烈日当空，道路两旁，成熟的谷物在炎热下弯着腰，低着头。蚱蜢多得像草叶，在麦地里，在岸边的苇草丛中，发出微弱而嘈杂的鸣声。
                </p>


            </div>

            <div id="dev-element-classes">
                <h3>被风吹过的夏天</h3>
                <p>
                    光的脚步在寂静里渐行渐远，忽然而来的一阵风、一场雨。淡去了春暖花开的明媚，褪去了夏日炎炎的热烈，迎来了温凉静美的秋天。
                    一个转身，夏天就成了故事。一次回眸，秋天便成了风景。
                    秋风四涌，万静尘寰冥冥寂寞，无人问津空林路。雀落林海，透彻莹羽啾啾叹息，残屋去破叶。
                </p>
                <p>
                    秋天，灿烂的季节。绿叶转黄，枫叶变红，稻田金黄……一年四季中，再也没有哪个季节的颜色能如同秋天的金黄这般地绚烂夺目，这般地叫人陶醉与沉迷。
                </p>



            </div>

            <div id="dev-slide-classes">
                <h3>秋天的滋味</h3>
                <p>
                    到了现在，我们已经根本不知道有多少度，因为温度计已经被冻住了！人们想要说话，就得找一个大布袋接住被冻结的话语；人们想要眨眼，就得使出吃奶的力气托住眼睫毛，不让冻成8米的冰柱弄伤自己的眼睛；现在吃饭就麻烦了，水全部都冻成了冰，还不能用金属制的餐具，因为舌头一沾上金属制的餐具，就根本取不下来了！空气也在慢慢地变成结晶中，吸进去空气容易，可呼出空气就得吐出一块大冰块了！
                </p>
                <p>
                    冬天，在他的开始就走出了潇洒的一步——寒风。夜幕降临了，寒风好似一个醉汉，在大雪原上，在小镇的每座房前游荡着，时而放开喉咙狂怒地咆哮，时而疲惫地喘着粗气。光秃秃的树枝在狂风怒吼中战栗，摇曳不定，月也怕冷似得躲进了云层。人们颤着身子，捂着双手走在大街上，狂风肆无忌惮，凉飕飕的，直灌入人的衣襟，吹得人心寒。树木“哗哗”直响，狂风卷着树枝、树叶挥动，像魔鬼的爪子在乱舞。冬天，用自己的独特向人们展示了它的风姿。

                </p>
                <p>
                    人们打一个喷嚏，“啊欠！”的声音就被冻结了；小猫抖抖自己的毛，抖毛的动作就被冻结了；跑接力赛的人们掉棒了，掉棒的那一瞬间就被冻结了；人们每看一样东西，看东西的目光就被冻结了；灯火渐渐亮了起来，可刚一开灯，光线就被冻结了；晚上，月亮出来了，可是比起前几天的月亮，这次的月亮还是没有变化，科学家研究了很久，发现月亮变化的过程已经被冻结了……
                </p>
                <p>
                    刚打开家门又是猛风阴云不散般的向我扑来，我再一次打起寒噤来。一路上我缩着身子迎风而上，刚走出巷口，走在别人家的杨桃树下我顿时感觉到阴风阵阵，冷得颤抖起来，但看到杨桃树叶随风飘落，黄色的、绿色的，好像彩蝶纷飞；这时我忘记了寒冷，只是沉醉于一番落叶纷飞的“仙境”中，突然陷入了童年的欢乐记忆中，幸福不断……
                </p
                >
            </div>

            <div id="dev-export-html">
                <h3>冬天吧还是回不来</h3>
                <p>
                    “哎呦，什么时候太阳变成冰棍了！”当人们触摸到什么东西时，总会发出这样的感慨。冬天，雪花姐姐热情地抚摸着世界上的万物，好像好久不见的兄弟再次重逢。当我想踏过小河时，已经没有夏天那么容易了，因为小河结成了冰，走路时一脚一滑，哎，这个淘气的小冰块！夏天，如果把脚伸进河水里，你就感觉到它的清凉，而河里的小鱼好像一点也不怕人，当你的脚刚伸到河水里时，小鱼还会跟着你走呢！现在，河面结了冰，小鱼也不知躲到哪里去睡大觉了。
                </p>
                <p>
                    一个人走在大街上，天空下着冰冷的雨，雨水打在脸上，滴进心里，感觉特别的冷。此时此刻，才感觉到冬天来临了，它就像位冷酷的君主，携着凛冽的北风，带着刺骨的寒意，灵魂和情感只能在他面前俯首称臣。
                    我高高兴兴的去上学。刚一出门，一阵冷风和我来了个紧密拥抱。这一拥抱让我直起鸡皮疙瘩。我立刻回家换上了厚衣服。走在大街上，虽然已经是全副武装了，可一股股寒气还是无声无息的窜进了我的衣服，好冷哦！我耸着肩膀，竭力让自己更暖和。街道口的下水道流出的水已经冻成了冰，教室里的玻璃也结上了一层白茫茫雾蒙蒙的霜。
                </p>

            </div>

        </section>

        <section>
            <div id="css">
                <h2>第三章</h2>
                <p>
                    我搞不懂,韩寒平时总说希望有人骂他,难道真的是"无敌是最寂寞"?我上他的博客看了一下,骂他的人很多,但都是用一些粗俗的没有水平的话(就是直接骂.........完整代码请登录后点击上方下载按钮下载查看
文章目录章节滚动定位导航

网友评论0

css实现网页滚动粘性导航条效果代码

js+css实现左侧伸缩导航菜单栏效果代码

gsap+svg实现菜单点击切换炫酷动画效果代码

gsap+svg实现炫酷古典菜单悬停动画效果代码

CustomEase+gsap实现炫酷弹出式导航菜单效果代码

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码
