ScrollIt实现长网页滚动分段导航效果代码

代码语言:html

所属分类:加载滚动

代码描述:ScrollIt实现长网页滚动分段导航效果代码,可以设置键盘按键进行上下滚动切换。

代码标签: ScrollIt 分段 滚动 导航

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
   
</head>

<body>
    <nav>
        <ul>
            <li> <a class='active' data-scroll-nav='0'>Link 1</a> </li>
            <li> <a data-scroll-nav='1'>Link 2</a> </li>
            <li> <a data-scroll-nav='2'>Link 3</a> </li>
            <li> <a data-scroll-nav='3'>Link 4</a> </li>
        </ul>
    </nav>
    <section data-scroll-index='0'>
        <div class='content' style="background:#FFFFCC;">
            1
        </div>
    </section>

    <section data-scroll-index='1'>
        <div class='content' style="background:#CCFFFF;">
            2
        </div>
    </section>

    <section data-scroll-index='2'>
        <div class='content' style="background:#FFCCCC;">
            3
        </div>
    </section>

    <section data-scroll-index='3'>
        <div class='content' style="background:#FFCC99;">
            4
        </div>
    </section>

    <section data-scroll-index='4'>
        <div class='content' style="background:#FFCCCC;">
            5
        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0