jquery+css实现文章底部滚动章节导航效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery+css实现文章底部滚动章节导航效果代码，页面滚动，底部进度条调到响应章节上。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700,800);
@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Unica+One);

body {
	background-color: #2E334A;
	font-family: 'Lora', serif;
  	margin: 0px;
  	color: #B7B8BF;
}

a:link {
	text-decoration: none;
	color: #f15a24;
}
a:hover {
	text-decoration: none;
	color: #f15a24;
}

h1 {
	font-family: 'Open Sans Condensed';
	text-transform: uppercase;
	font-weight: 700;
	font-size: 50px;
	margin-bottom: 0px;
	margin-top: 50px;
	color: #8EC9D2;
	line-height: 45px;
}
h3 {
	font-weight: 400;
	margin-top: 0px;
	font-style: oblique;
	font-size: 24px;
	margin-bottom: 25px;
	color: #8EC9D2;

}

p {
	margin-bottom: 50px;
}

.intro {
	font-family: 'Unica One';
	color: #f15a24;
}

.container {
	max-width: 500px;
	margin: auto;
	padding: 50px;
}

.footer-scroller {
	position: fixed;
	bottom: 0;
	background-color: #272b3f;
	width: 100%;
	height: 60px;
	overflow-x: scroll;
	margin: 0px;



}
.section {
	background-color: #8EC9D2;
	color: #2E334A;
	width: 75px;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	position: relative;
	font-family: 'Open Sans';
	font-weight: 800;
	font-size: 28px;
  	line-height: 28px;
	margin-right: 10px;


}
.hipsum {
	font-size: 18px;
  	line-height: 28px;
  	font-style: oblique;
  	margin-bottom: 200px;


}
.mover-bar {
	height: 100%;
	border-right:4px solid #f15a24;
	width: 0px;
	float: left;
	z-index:100;
	position: absolute;
	-webkit-transition: left 5s;
	transition: left 1s;

}

.liner {
	float: left;
	position: relative;
	width: 45%;
	height: 50%;
	border-bottom: 1px dotted yellow;
}
.bar-section {
	float: left;
	position: relative;
	width: 200px;
	height: 60px;
	border-right: 1px dotted #B7B8BF;
  	transition-property: background-color;
  	transition-duration: 1s;
  	transition-timing-function: linear;
}


.number {
	background-color: #1b1e2c;
	font-size: 12px;
	color: #B7B8BF;
	width: 40px;
	display: inline-block;
	text-align: center;
	font-family: 'Unica One';
	margin: 3px;
	padding: 3px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	box-shadow: inset 0 -6px 0 #f15a24;
	border-bottom: 	0px solid #f15a24;
	transition: all .2s;

}

.number:hover {
background-color: #8EC9D2;
color: #2E334A;
}

@media screen and (max-width : 768px)
{
	.number { display: none; }
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container">
        <div class="header">
            <h1>Slidey</h1>
            <h3>a progress navigator bar</h3>
        </div>
        <div class="hipsum">
            <p id="section0">
                <div class="section">0</div><span class="intro">Chapter 0:</span> When you scroll down the page, the bar on the bottom of the page moves the amount you have read, from section to section. When you finish a section, the section at the bottom of the page changes
                color, indicating that you've read the section. You can also click on the chapter number to take you to that section. All of the sizing and scrolling is programmed in JavaScript, so you can change all the content and the bar at the bottom
                will be sized and linked accordingly. You just need to create the same number of sections as you create bars.</p>
            <p id="section1"><span class="section">1</span><span class="intro">Chapter 1: </span>Chambray cliche everyday carry, franzen gentrify DIY ethical yr bicycle rights art party kale chips kogi tattooed. Austin pinterest organic umami tote bag YOLO hella, authentic
                brunch shabby chic sartorial selfies. Cred kinfolk echo park cold-pressed. Church-key tousled synth humblebrag. Hashtag truffaut shoreditch 8-bit chia portland blue bottle, art party pinterest neutra paleo whatever slow-carb echo park
                small batch. Lomo twee fixie scenester, fanny pack bitters blue bottle. Pork belly hella forage vice, crucifix put a bird on it tousled bicycle rights craft beer lumbersexual ethical.</p>
            <p id="section2"><span class="section">2</span><span class="intro">Chapter 2: </span>Crucifix lumbersexual heirloom PBR&amp;B, XOXO put a bird on it blog. Offal narwhal craft beer, art party quinoa salvia hashtag poutine williamsburg thundercats. Gochujang
                tacos chia, readymade venmo meditation bespoke truffaut. Brooklyn flexitarian before they sold out pinterest fap williamsburg gentrify four dollar toast keytar literally cold-pressed. Shabby chic cornhole lo-fi bushwick listicle, pitchfork
                chambray normcore trust fund 8-bit put a bird on it. Ugh tacos typewriter vegan, banh mi slow-carb chillwave kitsch DIY sriracha. Four loko DIY taxidermy, jean shorts direct trade normcore everyday carry.</p>
            <p id="section3"><span class="section">3</span><span class="intro">Chapter 3: </span>Retro schlitz XOXO green juice, affogato echo park neutra 90's. Four loko tofu fashion axe, leggings fanny pack wolf vice. Direct trade forage mlkshk, kale chips VHS pickled
                pinterest kombucha skateboard brooklyn schlitz banh mi hella aesthetic locavore. Kinfolk vinyl heirloom polaroid, cliche microdosing single-origin coffee before they sold out fanny pack listicle everyday carry. Disrupt offal cray etsy
                marfa meggings fashion axe tousled sustainable. Affogato tote bag yr knausgaard semiotics. Neutra asymmetrical skateboard green juice.</p>
            <p id="section4"><span class="section">4</span><span class="intro">Chapter 4: </span>Next level organic banjo listicle, selvage hoodie banh mi mumblecore farm-to-table cornhole austin ramps keffiyeh ethical trust fund. DIY dreamcatcher bespoke, health goth
                church-key pickled meh echo park portland truffaut knausgaard meditation forage. Listicle godard asymmetrical bitters poutine church-key, vice offal YOLO food truck semiotics. Pug viral chillwave organic, four loko letterpress leggings
                occupy. Raw denim flexitarian DIY narwhal, lomo ramps crucifix mixtape ugh chartreuse knausgaard trust fund YOLO organic green juice. Small batch selfies quinoa distillery food truck authentic before they sold out, try-hard ramps humblebrag
                meditation sriracha. Flannel hammock mlkshk, bushwick tacos thundercats mixtape street art umami banh mi shoreditch seitan sartorial helvetica chambray.</p>
            <p id="section5"><span class="section">5</span><span class="intro">Chapter 5: </span>Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz,
                lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps kogi +1 humblebrag. Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan
                fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra, seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland.
                Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde
                you probably haven't heard of them ramps kogi +1 humblebrag. Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed
                drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra, seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland. Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix
                cardigan kogi plaid retro williamsburg. Umami put a bird on it small batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps kogi +1 humblebrag.</p>
            <p>Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra,
                seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland. Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small
                batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps kogi +1 humblebrag.</p>
            <p>Tote bag single-origin coffee pug, +1 man bun DIY roof party iPhone aesthetic tumblr authentic brooklyn seitan fanny pack organic. Man bun tofu shoreditch, try-hard cold-pressed drinking vinegar tousled shabby chic bespoke. Humblebrag +1 neutra,
                seitan poutine vegan blog keffiyeh squid hoodie chartreuse locavore bushwick everyday carry portland. Slow-carb cliche vinyl, meh pug etsy microdosing bitters crucifix cardigan kogi plaid retro williamsburg. Umami put a bird on it small
                batch viral. 8-bit direct trade schlitz, lo-fi cred meditation celiac hammock franzen. Pork belly tilde you probably haven't heard of them ramps k.........完整代码请登录后点击上方下载按钮下载查看