scrollnav.umd实现自动生成单页锚点导航效果代码-html代码-BFW代码库

代码语言：html

代码描述：scrollnav.umd实现自动生成单页锚点导航效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">







    <style>
        body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
          margin: 0;
          padding: 0;
        }
        
        @media screen and (min-width: 800px) {
          .scroll-nav {
            float: right;
          }
        }
        @media screen and (max-width: 799px) {
          .scroll-nav {
            text-align: center;
          }
        }
        
        .scroll-nav__list {
          margin: 0 auto;
          padding: 0;
          list-style-type: none;
        }
        .scroll-nav__list:after {
          content: "";
          display: table;
          clear: both;
        }
        @media screen and (max-width: 799px) {
          .scroll-nav__list {
            display: inline-block;
          }
        }
        
        .scroll-nav__item {
          margin-bottom: 5px;
          float: left;
          margin-right: 15px;
          border-bottom: 1px solid transparent;
        }
        
        .scroll-nav__item--active {
          font-weight: 600;
          border-bottom-color: white;
        }
        
        .scroll-nav__link {
          color: white;
          text-decoration: none;
        }
        
        .page__header {
          position: sticky;
          top: 0;
          padding: 15px 10px;
          background: black;
        }
        .page__header:after {
          content: "";
          display: table;
          clear: both;
        }
        
        .page__title {
          margin: 0;
          font-size: 22px;
          color: white;
        }
        @media screen and (max-width: 799px) {
          .page__title {
            text-align: center;
            margin-bottom: 15px;
          }
        }
        @media screen and (min-width: 800px) {
          .page__title {
            float: left;
          }
        }
        
        .post__article {
          padding: 0 20px;
        }
        @media screen and (min-width: 700px) {
          .post__article {
            padding: 0 30px;
          }
        }
    </style>


</head>

<body>
    <header class="page__header" role="banner">
        <h1 class="page__title">scrollnav.js Single-pager Demo</h1>
    </header>

    <div class="main" role="main">

        <article class="post__article">
            <h1>Accumsan</h1>
            <p>Sit nostra velit vehicula nonummy rhoncus est facilisis sem suspendisse. Arcu magna nonummy. Per placerat taciti posuere gravida maecenas class a auctor arcu eros. Posuere litora arcu fermentum Consectetuer et dapibus fringilla. Molestie maecenas
                varius curabitur eu justo tristique ridiculus congue diam odio. Cum rhoncus integer nunc magna facilisis, nulla eros metus pharetra Placerat duis ligula ridiculus nulla Orci urna facilisi facilisi nullam.</p>

            <p>Nunc porta congue urna sapien. Hendrerit dolor turpis blandit justo venenatis laoreet felis. Morbi tempor volutpat sociosqu nam nunc amet posuere accumsan turpis venenatis tristique molestie molestie duis nam egestas vivamus nulla nulla curae;
                justo a <strong>potenti</strong> sed erat nibh <em>vulputate</em> nisl sit posuere. Consequat ac, hymenaeos Magnis hendrerit fames arcu quis taciti malesuada blandit sed pede id convallis vestibulum, nonummy etiam at. Venenatis ante vivamus.</p>

            <p>Natoque iaculis mus metus est aptent sed, habitasse, arcu hendrerit fringilla primis eros penatibus parturient. At eget hendrerit magnis at. Montes luctus pede, metus eget curae; sociosqu ultrices euismod condimentum. Euismod et congue vitae.
                Auctor eleifend hymenaeos nonummy lorem nascetur laoreet cursus.</p>

            <p>Interdum velit quisque sociosqu nostra dis at fusce sociis netus sem et sociis nec rhoncus torquent ut pharetra feugiat ante senectus morbi adipiscing, duis nonummy nonummy. Ridiculus mauris lacinia egestas nostra urna sociosqu habitasse.
                Lacus ullamcorper sodales condimentum nam sem porta blandit congue. Ultrices, pellentesque. Laoreet massa penatibus. Egestas mattis <em>ullamcorper</em> accumsan mauris ante augue diam eu turpis.</p>

            <p>Taciti dignissim aliquet, sociosqu dis sollicitudin vestibulum euismod lorem dignissim vel etiam mus libero hymenaeos cum, lectus vitae Facilisis taciti quam metus magna mattis arcu justo magnis justo parturient sodales rhoncus. Ante facilisis
                augue ullamcorper duis pede scelerisque eros dignissim risus auctor libero luctus hac tellus per a netus commodo diam semper imperdiet dolor vivamus. Primis dis sem arcu euismod sem convallis eget faucibus. Pulvinar etiam at eros vitae
                magnis.
            </p>

            <h2>Penatibus</h2>
            <p>Volutpat <strong>id viverra aliquet</strong> ultrices. Taciti <em>bibendum</em> venenatis ipsum ligula ultrices natoque, eu interdum inceptos interdum iaculis fusce ad egestas quis diam justo pharetra nisl mattis, adipiscing. Tortor ornare
                enim ligula dictumst. Vestibulum penatibus iaculis. Lectus diam taciti, lobortis ornare rutrum ligula id vulputate cubilia platea tortor et dictumst dignissim sollicitudin ut. Eu molestie turpis proin sit nisl. Metus nec litora iaculis
                lobortis porta rutrum ornare, luctus. Hendrerit. Consequat, accumsan nullam blandit pharetra fringilla sodales vel.</p>

            <h2>Tellus</h2>
            <p>Turpis morbi augue sed montes varius aptent lacin.........完整代码请登录后点击上方下载按钮下载查看