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