以下是 jQuery锚点带动画跳转滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery锚点带动画跳转特效</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<link href="css/christmas.css" rel="stylesheet" type="text/css" />
<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>
</head>
<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>
</body>
</html>
CSS代码(christmas.css):
@charset "utf-8";/* CSS Document */
.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,"\5B8B\4F53";}
.row:after{clear:both;content:'\0020';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:"\5B8B\4F53";}
h1,h2,h3,h4,h5,h6{font-family:\5FAE\8F6F\96C5\9ED1;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;}
分享到QQ
分享到微博
微信扫一扫
