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 lacinia sem, amet at tempor ipsum interdum morbi quisque taciti, fames posuere netus tellus Taciti maecenas molestie. Egestas fusce Euismod turpis nascetur est aliquet nullam facilisi ultricies,
                consequat. Ultricies vitae scelerisque. Dui proin semper fringilla, fringilla blandit vehicula elementum cubilia proin habitant mus augue at arcu scelerisque. Litora scelerisque lobortis vel varius auctor enim sit vitae. Pretium parturient
                <em>suscipit aenean fringilla</em> convallis dis ultricies scelerisque nisi erat ad mollis vel blandit Habitant eleifend molestie tristique.</p>

            <h2>Duis</h2>
            <p>Convallis aptent mi, metus, est <strong>faucibus netus vestibulum</strong> faucibus <em>netus</em> fusce dui curabitur justo tristique <strong>maecenas</strong> imperdiet nunc praesent. Varius curabitur pede torquent imperdiet laoreet purus
                risus malesuada <em>at</em> sodales purus fringilla congue magna tempus. Amet est nonummy suspendisse dolor duis, hac suscipit convallis dictum, convallis, est sollicitudin egestas Imperdiet et euismod mollis, ante interdum faucibus hymenaeos.</p>

            <h2>Suspendisse</h2>
            <p>Tempor. Aliquam est curae; ullamcorper, sem pede <em>dolor</em> laoreet nascetur, lacinia nascetur amet platea class parturient pellentesque viverra pretium fusce, ligula nisl hymenaeos Urna ornare dictumst enim. Dapibus porta volutpat, diam.
                <em>Mauris</em> habitant ullamcorper. Sociosqu taciti accumsan et tempor risus massa velit dictumst. Feugiat elementum. Laoreet ultricies parturient, habitasse. Feugiat. Consequat commodo id <em>nam</em> nisl habitant <em>aliquam</em>                sem ac vel.</p>

            <p>Blandit. Lorem. Lectus. Parturient sociis ac laoreet. Cubilia, rutrum magnis ornare viverra. Adipiscing sociis erat Euismod molestie luctus parturient adipiscing pharetra interdum, tincidunt. Senectus ullamcorper posuere urna <strong>sollicitudin</strong>                nec habitasse. Vulputate quis lacinia magnis varius magna tempor ac vivamus at, netus molestie urna. Imperdiet. Pellentesque <em>lacus</em> scelerisque sollicitudin penatibus ultrices id. Morbi.</p>

            <p>Mi. Tortor libero turpis dolor. A pellentesque velit <strong>dolor</strong> dis massa elit lectus lectus, sodales et dui penatibus. Convallis vehicula dignissim netus commodo amet facilisi. Hendrerit quisque varius venenatis tempus ut aptent,
                semper, ridiculus habitant integer quis interdum adipiscing justo in venenatis condimentum ornare at nostra nullam.</p>

            <p>Arcu netus adipiscing, ad rutrum <strong>litora</strong> tristique vehicula. Curae; ligula nibh ornare. Vehicula aptent sit. Rutrum, integer. Leo, eleifend maecenas cum accumsan volutpat facilisi .........完整代码请登录后点击上方下载按钮下载查看