jquery实现滚动页面字母索引进度效果代码-html代码-BFW代码库

jquery实现滚动页面字母索引进度效果代码

代码语言：html

代码描述：jquery实现滚动页面字母索引进度效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        html {
        box-sizing:border-box;
}
*,*:after,*:before {
        box-sizing:inherit;
}
html,body {
        height:100%;
}
body {
        font-family:"Roboto",Helvetica,Arial,sans-serif;
        margin:0;
}
h1 {
        margin:0;
        padding:0;
}
section {
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        color:rgba(0,0,0,0.5);
        font-size:2rem;
        min-height:100%;
        height:100vh;
}
.Quick-navigation {
        position:fixed;
        z-index:1;
        margin:0;
        top:50%;
        right:0;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
}
.Quick-navigation-item {
        color:rgba(0,0,0,0.4);
        text-decoration:none;
        font-size:1.3em;
        -webkit-transition:color 0.3s;
        transition:color 0.3s;
        padding:0.5em;
        display:block;
}
.Quick-navigation-item:hover,.Quick-navigation-item.current {
        color:#fff;
}
.Scroll-progress-indicator {
        will-change:opacity,transform;
        -webkit-transition:all 0.5s;
        transition:all 0.5s;
        left:-10px;
        border-radius:2px;
        position:absolute;
        top:50%;
        opacity:0;
        padding:2em;
        -webkit-transform:translateX(200%) translateY(-50%);
        transform:translateX(200%) translateY(-50%);
        background-color:rgba(0,0,0,0.1);
}
.Scroll-progress-indicator.visible {
        -webkit-transform:translateX(-100%) translateY(-50%);
        transform:translateX(-100%) translateY(-50%);
        opacity:1;
}
#A {
        background-color:#dc143c;
}
#B {
        background-color:#eb2049;
        height:600px;
}
#C {
        background-color:#ed395d;
}
#D {
        background-color:#ef5271;
        height:200px;
}
#E {
        background-color:#f26a85;
}
.Scroll-to-top {
        position:fixed;
        right:20px;
        bottom:0;
        background-color:rgba(0,0,0,0.2);
        border:none;
        color:rgba(255,255,255,0.5);
        font-size:1.5rem;
        padding:0.5em;
        cursor:pointer;
        opacity:0;
        -webkit-transform:translateY(100%);
        transform:translateY(100%);
        -webkit-transition:all 0.3s;
        transition:all 0.3s;
        outline:none;
}
.Scroll-to-top.visible {
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
}
.Scroll-to-top:hover {
        color:rgba(255,255,255,0.9);
}
    </style>
</head>

<body>
    <nav class="Quick-navigation">
        <a href="#A" class="Quick-navigation-item">A</a>
        <a href="#B" class="Quick-navigation-item">B</a>
        <a href="#C" class="Quick-navigation-item">C</a>
        <a href="#D" class="Quick-navigation-item">D</a>
        <a href="#E" class="Quick-navigation-item">E</a>
        <div class="Scroll-progress-indicator"></div>
    </nav>
    <section id="A" class="js-scroll-step">
        <h1>A</h1>
    </section>
    <section id="B" class="js-scroll-step">
        <h1>B</h1>
    </section>
    <section id="C" class="js-scroll-step">
        <h1>C</h1>
    </section>
    <section id="D" class="js-scroll-step">
        <h1>D</h1>
    </section>
    <section id="E" class="js-scroll-step">
        <h1>E</h1>
    </section>
    <button class="Scroll-to-top">Scroll To Top</button>
    <script>
        (function() {
       function throttle(fn, delay, scope) {
           delay = delay || 250;
           var last, defe.........完整代码请登录后点击上方下载按钮下载查看