Dowemo

1. Js code.

<script type="text/javascript">


 jQuery(document).ready(function($) {


 $(".index_nav li a").click(function(event) { 


 var index=this.title


 var id='#'+'index_'+index


 $("html,body").animate({scrollTop: $(id).offset().top}, 1000);


 });


 $(".taoba").click(function(event) { 


 var index=this.title


 var id='#'+'index_'+index


 $("html,body").animate({scrollTop: $(id).offset().top}, 1000);


 });


 function a(x,y){


 l = $('#main').offset().left;


 w = $('#main').width();


 $('#tbox').css('left',(l + w + x) + 'px');


 $('#tbox').css('bottom',y + 'px');


 }//获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度


 $(function() { 


 $(window).scroll(function(){


 t = $(document).scrollTop();


 if(t>500){


 $('#tbox').show();


 }else{


 $('#tbox').hide();


 }


 if(t> 50){


 $('#gotop').fadeIn('slow');


 }else{


 $('#gotop').fadeOut('slow');


 } 


 }) 


 a(10,100);//#tbox的div距浏览器底部和页面内容区域右侧的距离


 $('#gotop').click(function(){ 


 $('body,html').animate({


 scrollTop: 0


 },


 800);//点击回到顶部按钮,缓懂回到顶部,数字越小越快


 return false; 


 })


 });


 });


</script>





2. Html code.


<body>


<div class="indexnav_wrap">


 <ul class="index_nav">


 <li><a href="javascript:void(0)" title="1"><i>活动</i><strong>1</strong></a></li>


 <li><a href="javascript:void(0)" title="2"><i>活动</i><strong>2</strong></a></li>


 <li><a href="javascript:void(0)" title="3"><i>活动</i><strong>3</strong></a></li>


 <li><a href="javascript:void(0)" title="4"><i>活动</i><strong>4</strong></a></li>


 <li><a href="javascript:void(0)" title="5"><i>活动</i><strong>5</strong></a></li>


 </ul>


</div>


<div class="h50"></div>


<div class="row" id="main">


 <h2 id="index_1">这是第一个活动页</h2>



 <div class="mainpage mainpage1">


 </div>



</div>


<div class="h15"></div>


<div class="row">


 <h2 id="index_2">这是第二个活动页</h2>



 <div class="mainpage mainpage2">



 </div>



</div>


<div class="h15"></div>


<div class="row">


 <h2 id="index_3">这是第三个活动页</h2>



 <div class="mainpage mainpage3">



 </div>



</div>


<div class="h15"></div>


<div class="row">


 <h2 id="index_4">这是第四个活动页</h2>



 <div class="mainpage mainpage4">



 </div>



</div>


<div class="h15"></div>


<div class="row">


 <h2 id="index_5">这是第五个活动页</h2>



 <div class="mainpage mainpage5">



 </div>



</div>


<div id="tbox"><!-- 这个必须有 id="tbox"-->


 <a class="taoba" href="javascript:void(0)" title="1">1</a>


 <a class="taoba" href="javascript:void(0)" title="2">2</a>


 <a class="taoba" href="javascript:void(0)" title="3">3</a>


 <a class="taoba" href="javascript:void(0)" title="4">4</a>


 <a class="taoba" href="javascript:void(0)" title="5">5</a>


 <a id="gotop" href="javascript:void(0)" title="回到顶部">回到顶部</a> <!-- 这个也是id="gotop" -->


</div>


</div>


</body>





3. Css part.

@charset"utf-8";


/* CSS Document Download by http://www.codefans.net*/


.gray {


 -webkit-filter: grayscale(100%);


 -moz-filter: grayscale(100%);


 -ms-filter: grayscale(100%);


 -o-filter: grayscale(100%);


 filter: grayscale(100%);


 filter: gray;


}


/* reset */


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, button, textarea, th, td {


 margin:0;


 padding:0; 


}


table {


 border-collapse:collapse;


 border-spacing:0;


}


fieldset, img {


 border:0;


}


ul,li {


 list-style:none;


}


body {


 background: #f1f1f1;


 color: #666;


 font:12px/1.7 Helvetica,Arial,Tahoma,sans-serif,"5B8B4F53";


}


.row:after {


 clear:both;


 content:'020';


 display:block;


 height:0; 


}


.row {


 zoom:1;


}


/*链接颜色*/


a,button{outline:none;/*移除虚线框 IE8,FF有用*/hide-focus: expression(this.hideFocus=true);/*IE6、IE7*/}


a{


 color:#999;


 text-decoration:none;


}


a:hover{


 color:#be0000;


 text-decoration: underline;


}


.fst{


 font-family:"5B8B4F53";


}


h1,h2,h3,h4,h5,h6{font-family:5FAE8F6F96C59ED1; font-size: 16px;}


/* end reset */


.row{


 width:1000px;


 margin:0 auto;


}


/*模板头部,所有专题页面公用*/


.index_nav{width:575px; height: 70px; margin: 0 auto; padding-left: 5px; background: #fff;}


.index_nav li{width: 115px; height: 70px; float: left;}


.index_nav li a{display: block; float: left; width: 70px;height: 70px; background:url(../images/index_nav.gif) 0 0 no-repeat; text-align: center; color: #e02800;}


.index_nav li a i{display: block; padding-top: 12px; height: 22px; line-height: 22px;}


.index_nav li a strong{font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; display: block; height: 30px; line-height: 20px;}


.index_nav li a:hover{background-position: 0 -70px; color: #fff; text-decoration: none;}


.h15{height: 15px; overflow: hidden;}


.mainpage{width: 1000px; height:1000px;}


h2{font-size: 24px; text-align: center; color: #333; font-weight: bold;}


.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;}


.mainpage1{background: #fe6400;}


.mainpage2{background: #be0000;}


.mainpage3{background: #ccc;}


.mainpage4{background: #0093dd;}


.mainpage5{background: #a8cf33;}


*html{background-image:url(about:blank);background-attachment:fixed;}/*低版本浏览器防止抖动的,必须有*/


#tbox{width:30px; height:200px; float:right; position:fixed; display: none;


_position:absolute;


_bottom:auto;


_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));


_margin-bottom:50px;


}/*这个只能改宽高其他的不要修改,需要滚动的内容都要放在这个div里面*/


.taoba{display:block; background:#c2c2c2; width:30px; height:30px; margin-bottom:4px;text-align: center; color: #fff; line-height: 30px; overflow: hidden;cursor:pointer}


.taoba:hover{background:#ff4200; text-decoration: none; color: #fff;}


#gotop{display:block; width:30px; height:30px; text-indent:-9999px; overflow: hidden; color: #fff; background:url(../images/top_icon.gif) no-repeat; position:absolute; display:none; cursor:pointer}/*这个样式随便改,必须有position:absolute; */


#gotop:hover{background-position: 0 -30px;}





4. Add one.

<script src="js/jquery.min.js" type="text/javascript"></script>










Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs