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