<script>
$(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>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<a>
<font style="60px; height:1px; display:block"></font>
<span>返回顶部</span>
</a>
</div>