背景图片为金木研，这是我最爱的一张图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta charset="utf-8">
<head>
<title>jQuery之锚点带动画跳转特效</title>
<script src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
/* 复位 */
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: #0A0A0A;
color: #40E0D0;
}
.row:after {
clear:both;
content:'\0020';
display:block;
height:0;
}
.row {
zoom:1;
}
/* 链接颜色 */
a,button{outline:none; hide-focus: expression(this.hideFocus=true); }
a{
color:#FFFFFF;
text-decoration:none;
}
a:hover{
color:#FFFFFF;
text-decoration: underline;
}
.fst{
font-family: "\5B8B\4F53";
}
h1,h2,h3,h4,h5,h6{font-family:\5FAE\8F6F\96C5\9ED1; font-size: 16px;}
/* 底部复位 */
.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: 110px;height: 65px; background:url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_5-121106095005-50.gif) 0 0 no-repeat; text-align: center; color: #00000;}
.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 -50px; color: #fff; text-decoration: none;}
.h15{height: 15px; overflow: hidden;}
h2{
font-size: 24px;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}
.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;}
/*.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 100px 0 100px;}
.mainpage1{background: #00F5FF;}
.mainpage2{background: #be0000;}
.mainpage3{background: #2E8B57;}
.mainpage4{background: #1874CD;}
.mainpage5{background: #B03060;}

<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>
*/
*html{background-image:url(about:blank);background-attachment:fixed;}
#tbox{width:30px; height:240px; 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;
width:30px;
height:30px;
margin-bottom:4px;
text-align: center;
color: #fff;
line-height: 30px;
overflow: hidden;
cursor:pointer;
background-color: #c2c2c2;
background-position: right;
}
.taoba:hover{
text-decoration: none;
color: #000000;
background-color: #FFFFFF;
}
#gotop{display:block; width:50px; height:120px; text-indent:-999px; overflow: hidden; color: #fff; background:url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_5-120601155S6-50.png) no-repeat; position:absolute; display:none; cursor:pointer}
#gotop:hover{background-position: 0 -50px;}
</style>
<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
},
500);//点击回到顶部的时间ms
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"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_2">这是第二个活动页</h2>
<div class="mainpage mainpage2"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_3">这是第三个活动页</h2>
<div class="mainpage mainpage3"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_4">这是第四个活动页</h2>
<div class="mainpage mainpage4"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div>
</div>
<div class="h15"></div>
<div class="row">
<h2 id="index_5">这是第五个活动页</h2>
<div class="mainpage mainpage5"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_QQ%e6%88%aa%e5%9b%be20151028154841.png"></img></div>
</div>

<div 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>
</div>
</div>
</body>

//

jQuery之锚点带动画跳转特效的更多相关文章

  1. jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  3. jQuery下锚点的平滑跳转

    对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...

  4. jquery插件——点击交换元素位置（带动画效果）

    一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...

  5. 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  6. 带动画效果的jQuery手风琴

    带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...

  7. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  8. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  9. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

随机推荐

  1. c++出错记录

    错误1如下:  vector<vector<int>> m_vc;  error: '&' cannot appear in a constant-expression ...

  2. 百度地图 >> 自定义控件

    前言 百度地图API中预定义的UI控件,比如NavigationControl平移缩放控件,CopyrightControl版权控件,MapTypeControl地图类型控件....,这些都继承自抽象 ...

  3. win7硬盘安装Ubuntu12.04 64位时显示Error 15： File not found.

    安装Ubuntu12.04 -64位时,用EasyBCD建好引导文件重启电脑后出现如下错误: Error 15: File not found 原因一个是安装文件所在盘符不对,另一个是文件名.Ubun ...

  4. Windows命令大全

    From:http://technet.microsoft.com/zh-cn/library/cc731728(v=ws.10).aspx Adprep Append Arp Assoc At At ...

  5. 在Flash Builder或者Eclipse统计代码行数的方法

    在Flash  Builder或者Eclipse统计代码行数的方法如下图菜单栏--搜索--搜索文件

  6. Android——设计原则（Design Principles）

    Enchant Me Delight me in surprising ways(动画.音效...) Real objects are more fun than buttons and menus( ...

  7. C# - 函数参数的传递

    近段时间,有几个刚刚开始学习C#语言的爱好者问我:C#中的函数,其参数的传递,按值传递和按引用传递有什么区别.针对这一问题,我简单写了个示例程序,用以讲解,希望我没有把他们绕晕.因为,常听别人说起:“ ...

  8. xcode 左边导航栏中，类文件后面的标记“A”,&quot;M&quot;,&quot;?&quot;……等符号的含义？？？

    "M" = Locally modified    "U" = Updated in repository  "A" = Locally a ...

  9. Oracle非重要文件恢复，redo、暂时文件、索引文件、password文件

    增量备份的应用在recovery阶段.不再restore阶段 了解数据库设置表: SQL>desc database_properties  Name                       ...

  10. Android编译提示ImportError: No module named bz2的解决办法

    在安装node.js时提示ImportError: No module named bz2.很明显这个python中没有装bz2的库导致的.解决方法:sudo apt-get install libb ...