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

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

代码语言：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. Mo.........完整代码请登录后点击上方下载按钮下载查看