天气冷了,做做广播体操~
第三套广播体操--时代在召唤
做完了,回到正文上
先上效果图,有图有真相
我只是做了个简单的demo,漂亮的样式自己去设计,毕竟我只是敲代码的
html部分
<!--导航条 -->
<div class="nav">
<ul>
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li class="last">回到顶部</li>
</ul>
</div>
<!--楼层内容-->
<div class="header">
首页
</div>
<div class="main">
<div class="floor one">1</div>
<div class="floor two">2</div>
<div class="floor there">3</div>
<div class="floor four">4</div>
</div>
<div class="footer">
<span>底部</span>
</div>
敲下黑板,咚~咚~咚~
js部分
<script src="js/jquery.min.js"></script>
<script>
$(function(){
//1.楼梯什么时候显示
$(window).on('scroll',function(){
var $scroll=$(this).scrollTop();
if($scroll>=800){
$('.nav').show();
}else{
$('.nav').hide();
}
//4.拖动滚轮,对应的楼梯样式进行匹配
$('.floor').each(function(){
var $loutitop=$('.floor').eq($(this).index()).offset().top+200;
if($loutitop>$scroll){//楼层的top大于滚动条的距离
$('.nav li').removeClass('active');
$('.nav li').eq($(this).index()).addClass('active');
return false;//中断循环
}
});
});
//2.获取每个楼梯的offset().top,点击楼梯让对应的内容模块移动到对应的位置 offset().left
var $loutili=$('.nav li').not('.last');
$loutili.on('click',function(){
$(this).addClass('active').siblings('li').removeClass('active');
var $loutitop=$('.floor').eq($(this).index()).offset().top;
//获取每个楼梯的offsetTop值
$('html,body').animate({//$('html,body')兼容问题body属于chrome
scrollTop:$loutitop
})
});
//3.回到顶部
$('.last').on('click',function(){
$('html,body').animate({//$('html,body')兼容问题body属于chrome
scrollTop:0
})
});
})
</script>
css部分
*{margin: 0;padding: 0;list-style: none;}
.nav{
position: fixed;
width: 40px;
top: 100px;
left: 50px;
border: 1px solid #1A9909;
}
.nav ul li{
width: 100%;
line-height: 30px;
border-bottom: 1px dotted #DDDDDD;
background: #918888;
text-align: center;
cursor: pointer;
padding: 10px 0;
}
.nav ul li.last{
background: #288BC4;
}
.nav ul li.active{
background: #C9302C;
display: block;
}
.nav ul li:hover{
background: #5CB85C;
display: block;
}
.header{
width: 100%;
height: 820px;
background: #C9302C;
text-align: center;
line-height: 600px;
}
.main{
width: 100%;
}
.floor{
height: 850px;
width: 100%;
line-height: 600px;
text-align: center;
}
.one{background: orange;}
.two{background: yellow;}
.there{background: greenyellow;}
.four{background: deepskyblue;}
.footer{
width: 100%;
height: 400px;
line-height: 400px;
text-align: center;
background: #A6E1EC;
}
努力工作,我们会有猫的