<div id="loutinav" style="display: none;">
<ul>
<li class="active"><span>帅哥区</span> </li>
<li><span>女神区</span> </li>
<li><span>萌妹区</span> </li>
<li><span>男神区</span> </li>
<li><span>暖男区</span> </li>
<li><span>靓仔区</span> </li>
<li><span>未知区</span> </li>
<li><span>红番区</span> </li>
<li><span>还没看够</span> </li>
<li class="last">顶部</li>
</ul>
</div>
<!--楼层内容开始-->
<div id="header">
向下滚动鼠标查看效果
</div>
<div id="main">
<div class="louti" style="border:1px solid #cc0033;">
帅哥区
</div>
<div class="louti" style="border:1px solid #999933;">
女神区
</div>
<div class="louti" style="border:1px solid #ccff33;">
萌妹区
</div>
<div class="louti" style="border:1px solid #006633;">
男神区
</div>
<div class="louti" style="border:1px solid #6666cc;">
暖男区
</div>
<div class="louti" style="border:1px solid #ff6600;">
靓仔区
</div>
<div class="louti" style="border:1px solid #ffff00;">
未知区
</div>
<div class="louti" style="border:1px solid #3333ff;">
红番区
</div>
<div class="louti" style="border:1px solid #ff00cc;">
还没看够
</div>
</div>
<div id="footer">
页面底部
</div>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'microsoft yahei';
}
#loutinav {
width: 35px;
position: fixed;
top: 100px;
left: 50px;
border: 1px solid #ddd;
display: none;
}
#loutinav ul li {
width: 35px;
height: 32px;
border-bottom: 1px dotted #DDDDDD;
list-style: none;
font-size: 12px;
text-align: center;
position: relative;
cursor: pointer;
padding: 10px 0;
background-color: #000000;
color: #fff;
}
#loutinav ul li span {
width: 35px;
height: 32px;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
}
#loutinav ul li.last {
background: #5e4a4a;
color: #fff;
border-bottom: 1px solid #ddd;
}
#loutinav ul li.active span {
background-color: #2dbe60;
color: #fff;
display: block;
}
#loutinav ul li:hover span {
background-color: #2dbe60;
color: #fff;
display: block;
}
#header {
width: 1000px;
height: 1000px;
border:5px solid #cc6633;
margin: 0 auto;
font-size: 50px;
line-height: 1000px;
text-align: center;
color: #000;
}
#main {
width: 1000px;
margin: 0 auto;
}
#main .louti {
height: 600px;
width: 1000px;
font-size: 50px;
color: #000;
font-weight: bold;
text-align: center;
line-height: 600px;
}
#footer {
width: 1000px;
height: 400px;
border: 5px solid #000;
margin: 0 auto;
font-size: 50px;
line-height: 400px;
text-align: center;
color: #000;
}
</style>
JQuery:
<script>
$(function(){
$(window).on('scroll',function(){
var $scroll = $(this).scrollTop();
if ($scroll>= 800){
$("#loutinav").show();
}else{
$("#loutinav").hide();
}
$('.louti').each(function(){
var $loutitop = $('.louti').eq($(this).index()).offset().top;
if($loutitop > $scroll){
$('#loutinav li').removeClass('active');
$('#loutinav li').eq($(this).index()).addClass('active');
return false;
}
})
});
var $loutili = $('#loutinav li').not('.last');
$loutili.on('click',function(){
$(this).addClass('active').siblings('li').removeClass('active');
var $loutitop = $('.louti').eq($(this).index()).offset().top;
$('html,body').animate({
scrollTop:$loutitop
});
});
$('.last').on('click',function(){
$('html,body').animate({
//$('html,body')兼容问题body属于chrome
scrollTop:0
})
})
})
</script>
JQuery点击锚点滚动到相应的模块
最新推荐文章于 2017-09-28 17:45:07 发布