<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0}
html{width: 100%;height: 100%}
body{width: 100%;height: 100%}
.one0{background:burlywood}
.one1{background: #D40000}
.one2{background:yellow}
.one3{background:blueviolet}
.one4{background:chocolate}
.one5{background:violet}
.one6{background:goldenrod}
.one{width:100%;height: 100%}
.floatCtro{ width:100px; height:350px; position: fixed; right:50%; margin-right:-700px; top:131px; z-index:100}
.floatCtro p{width:100px; text-align:center; height:40px; line-height:40px; font-family:'寰蒋闆呴粦'; font-size:14px; color:#676767; margin:0; padding:0; cursor:pointer; background:#fff;}
.floatCtro a{ display:inline-block; width:100px; height:60px; margin:10px 0 0 0; background:#fff; color:#000; vertical-align:middle; cursor:pointer;}
.floatCtro a span{ display:block; width:100px; height:44px; font-family:'寰蒋闆呴粦'; font-size:14px; line-height:40px; text-align:center; margin:8px 0px;}
.floatCtro a:hover{ background:#c40000; color:#fff; zoom:1;}
.floatCtro p:hover{ background:#c40000; color:#fff;}
.floatCtro p.cur{ background:#c40000;color:#fff;}
.tcbox{display:block}
</style>
</head>
<body>
<div class="one one0" id="float00"></div>
<div class="one one1" id="float01"></div>
<div class="one one2" id="float02"></div>
<div class="one one3" id="float03"></div>
<div class="one one4" id="float04"></div>
<div class="one one5" id="float05"></div>
<div class="one one6" id="float06"></div>
<script>
alert($);
$(function(){
var AllHet = $(window).height();
var mainHet= $('.floatCtro').height();
var fixedTop = (AllHet - mainHet)/2
// $('div.floatCtro').css({top:fixedTop+'px'});
$('div.floatCtro p').click(function(){
var ind = $('div.floatCtro p').index(this)+1;
var topVal = $('#float0'+ind).offset().top;
$('body,html').animate({scrollTop:topVal},500)
})
$('div.floatCtro a').click(function(){
$('body,html').animate({scrollTop:0},500)
})
$(window).scroll(scrolls)
scrolls()
function scrolls(){
var f1,f2,f3,f4,f5,f6,f7,bck;
var fixRight = $('div.floatCtro p');
var blackTop = $('div.floatCtro a')
var sTop = $(window).scrollTop();
fl = $('#float01').offset().top;
f2 = $('#float02').offset().top;
f3 = $('#float03').offset().top;
f4 = $('#float04').offset().top;
f5 = $('#float05').offset().top;
f6 = $('#float06').offset().top;
if(sTop<=f2-100){
blackTop.fadeOut(300).css('display','none')
}
else{
blackTop.fadeIn(300).css('display','block')
}
if(sTop>=fl){
fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f2-100){
fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f3-100){
fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f4-100){
fixRight.eq(3).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f5-100){
fixRight.eq(4).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f6-100){
fixRight.eq(5).addClass('cur').siblings().removeClass('cur');
}
}
})
</script>
<div class="floatCtro">
<p class="cur">热门名牌</p>
<p>热门推荐</p>
<p>婚纱摄影</p>
<p>婚礼策划</p>
<p>婚礼司仪</p>
<p>幸福一生</p>
<a>
<font style="width:60px; height:1px; display:block"></font>
<span>返回顶部</span>
</a>
</div>
</body>
</html>
