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

代码语言：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, defer;
           return function() {
               var context = scope || this,
                   now = +new Date(),
                   args = arguments;
               if (last && now < last + delay) {
                   clearTimeout(defer);
                   defer = setTimeout(function() {
                       last = now;
                       fn.apply(context, args);
                   }, delay);
               } else {
                   last = now;
                   fn.apply(context, args);
               }
           }
       }

       function extend(destination, source) {
           for (var k in source) {
               if (source.hasOwnProperty(k)) {
                   destination[k] = source[k];
               }
           }
           return destination;
       }




       var ScrollManager = (function() {
           var defaults = {
                   steps: null,
                   navigationContainer: null,
                   links: null,
                   scrollToTopBtn: null,
                   navigationElementClass: '.Quick-navigation',
                   currentStepClass: 'current',
                   smoothScrollEnabled: true,
                   stepsCheckEnabled: true,
                   onScroll: null,
                   onStepChange: function(step) {
                       var self = this;
                       var relativeLink = [].filter.call(options.links, function(link) {
                           link.classList.remove(self.currentStepClass);
                           return link.hash === '#' + step.id;
                       });
                       relativeLink[0].classList.add(self.currentStepClass);
                   },
                   smoothScrollAnimation: function(target) {
                       $('html, body').animate({
                           scrollTop: target
       .........完整代码请登录后点击上方下载按钮下载查看