<!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="60px; height:1px; display:block"></font> <span>返回顶部</span> </a> </div> </body> </html>