css代码
/*rightNav*/
.rightNav{position: fixed;right:0;top:200px;width:120px;} .rightNav a{color: #fff;font-size: 16px;line-height: 36px;display: block;width: 100%;height:40px;line-height: 40px;} .rightNav ul>li>a{width:90px;padding-left: 30px;text-align: center;} .rightNav .specialNav{height:180px;display: none;} .rightNav .specialNav>li>a{width:120px;text-align: center;padding: 0;font-size: 14px;background: #fff;color: #343434} .rightNav .specialNav>li{background:#343434;margin: 5px 0;} .rightNav .Trends{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1001px;} .rightNav .special{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1035px;} .rightNav .discuss{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1066px;} .rightNav .back{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1099px;} .rightNav .Trends:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1001px;} .rightNav .special:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1035px;} .rightNav .discuss:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1066px;} .rightNav .back:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1099px;} .rightNav .specialNav>li>a:hover{background: #c33429;color: #fff} .rightNav a:hover{color: #9a9a9a} Js代码 <script src="http://n.sinaimg.cn/a15ac274/20151029/jquery-1.11.3.min.js"></script> <script type="text/javascript"> window.onload = function(){ //侧导航 (function(){ jQuery('.special').click(function(){ jQuery('.specialNav').slideToggle(); }); })(); //右导航点击 (function(){ jQuery('.back').click(function(){ jQuery('html,body').stop().animate({scrollTop :0},1000); }); jQuery('.liLead').click(function(){ jQuery('html,body').stop().animate({scrollTop :400+'px'},1000); }); jQuery('.liMoment').click(function(){ jQuery('html,body').stop().animate({scrollTop :1270+'px'},1000); }); jQuery('.liUnique').click(function(){ jQuery('html,body').stop().animate({scrollTop :1830+'px'},1000); }); jQuery('.liVideo').click(function(){ jQuery('html,body').stop().animate({scrollTop :2650+'px'},1000); }); jQuery('.discuss').click(function(){ jQuery('html,body').stop().animate({scrollTop :3700+'px'},1000); }); })(); }; </script> html代码 <!--右侧导航--> <div class="rightNav"> <ul class=""> <li class="mb10"><a href="http://roll.news.sina.com.cn/s_xjpfy2015_all/index.shtml" class="icon Trends" target="_blank">最新动态</a></li> <li class="mb5"> <a href="javascript:;" class="icon special">专题导航</a> <ul class="specialNav"> <li><a href="javascript:;" class=" icon liLead">头条</a></li> <li><a href="javascript:;" class="icon liMoment">精彩瞬间</a></li> <li><a href="javascript:;" class="icon liUnique">深度解码</a></li> <li><a href="javascript:;" class="icon liVideo">精彩视频</a></li> </ul> </li> <li class="mb10"><a href="javascript:;" class="icon discuss">评论</a></li> <li><a href="javascript:;" class="icon back">TOP</a></li> </ul> </div>