标签:
今天北京下了一天的大雨,中午吃完饭,人事将我们叫到办公室,说是要开会。大家都特别紧张,还以为是最近有出什么错了呢。原来是两件事:1、发上个项目的奖金。2、宣布今天下雨早点回家(会后就可以)。
回到家没事做,看腾讯新闻,把大燕网的右侧导航趴下了玩玩。
废话不多说,已经不少了,直接贴代码。
<!DOCTYPE html> <head> <title>辅助导航_腾讯·大燕网北京站</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script type="text/javascript" src="http://mat1.gtimg.com/sd/new_index/js/jquery.min.v1.7.2.js"></script> <style> #rtt,#rtt .gotop,#rtt .er{ background-image:url(http://mat1.gtimg.com/tj/images/rbg.png); background-repeat:no-repeat;} #rtt { width:103px; /*height:514px;*/ position:fixed; right:50px; bottom:30px; z-index:1000; padding-top:46px; display:block;} #rtt .r_list{ clear:both; overflow:hidden; display:none;} #rtt .r_list a{ height:30px; display:block;margin-top:2px; text-align:center; font:normal 16px/30px ‘微软雅黑‘; color:#fff; background:#bbb;} #rtt .r_list a:hover{ background:#2f8bd6; } #rtt .gotop{ height:48px; display:none; background-position:-103px 0; margin-top:2px; cursor:pointer; background-color:#bbb; } #rtt .er{background-position:-103px -48px; padding:98px 0 0 8px; height:70px; color:#fff; background-color:#b40700; line-height:20px;} </style> </head> <body> <h1 style="position: fixed;right:0;">大燕网北京站右侧辅助导航</h1> <div style="height:4000px;"></div> <div id="rtt" class="rtt" style="z-index: 99;"> <div class="r_list" id="r_list" style="display: none;"> <a href="javascript:void(0)" data-name="gm">游戏</a> <a href="javascript:void(0)" data-name="acts">活动</a> <a href="javascript:void(0)" data-name="fc">房产</a> <a href="javascript:void(0)" data-name="fc">家居</a> <a href="javascript:void(0)" data-name="qc">汽车</a> <a href="javascript:void(0)" data-name="yl">社区</a> <a href="javascript:void(0)" data-name="cj">财经</a> <a href="javascript:void(0)" data-name="ly">旅游</a> <a href="javascript:void(0)" data-name="ms">美食</a> <a href="javascript:void(0)" data-name="ss">时尚</a> <a href="javascript:void(0)" data-name="jy">教育</a> <a href="javascript:void(0)" data-name="jk">健康</a> <!-- <a href="javascript:void(0)" data-name=‘yl‘>娱乐</a> --> <a href="javascript:void(0)" data-name="tp">图片</a> </div> <div class="gotop" id="gotop" style="display: none;"></div> <div class="er" id="er"> 扫一扫,找燕小萌陪你聊人生。 </div> <script> var _dataTop=[]; $(‘.r_go_now‘).each(function(index, element) { _dataTop[$(this).data(‘go‘)]=$(this).offset().top; }); $(‘#r_list a‘).click(function(e) { var name = $(this).data(‘name‘); $(‘html,body‘).stop().animate({scrollTop: _dataTop[name]+‘px‘}, 800); }); </script> </div> <script type="text/javascript"> function myEvent(obj,ev,fn){ if(obj.attachEvent){ obj.attachEvent(‘on‘+ev,fn); }else{ obj.addEventListener(ev,fn,false); } } myEvent(window,‘load‘,function(){ var oRTT=document.getElementById(‘rtt‘); var pH=400;//document.documentElement.clientHeight; var htmlHeight = document.documentElement.scrollHeight; var timer=null; var scrollTop; window.onscroll=function(){ scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //var mHeight = Math.floor(pH / 2); var ie6 = !window.XMLHttpRequest; if (ie6) { oRTT.style.position = "absolute"; //oRTT.style.bottom = scrollTop + mHeight + ‘px‘; oRTT.className =oRTT.className; } if(scrollTop>=pH){ $(‘#r_list‘).slideDown(); $(‘#gotop‘).fadeIn(); }else{ $(‘#r_list‘).slideUp(); $(‘#gotop‘).hide(); } return scrollTop; }; $(‘#gotop‘).click(function(e) { $(‘html,body‘).animate({scrollTop: "0"}, 800); }); }); </script> </body></html>
标签:
原文地址:http://www.cnblogs.com/haley168/p/menuScroll.html