<!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制作顶部与左侧锚点板块定位功能带动画跳转特效 - xw素材网</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>

jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效的更多相关文章

  1. jQuery之锚点带动画跳转特效

    背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. jQuery制作div板块拖动层排序

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

  3. jQuery制作右侧边垂直二级导航菜单

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

  4. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  5. jQuery制作弹出窗（模态框）

    来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...

  6. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  7. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  8. jQuery网站顶部定时折叠广告

    效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  9. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

随机推荐

  1. [K/3Cloud]有关单据显示行数限制和数据导出的建议

    1.针对显示行数限制: 模仿现在很流行的"查看更多"的模式,动态加载数据. 我相信这一点建议别人也提过,还请总部对此开展头脑风暴,因为在实际使用中客户总是不理解为何要限制行数,解释 ...

  2. codevs——1675 大质数 2

    1675 大质数 2  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 小明因为没做作业而被数学老师罚站,之 ...

  3. qscoj Round 1(div 2)

    卿学姐OJ……很休闲啊……? A 分析:枚举/exgcd B 分析:栈模拟 弄个栈模拟配对过程,将能够配对的()位置染色,最后最长的一段染色区间就是答案 C 分析:dp f[i][j]表示前i个物品, ...

  4. MVC中动作方法三个特性以及解决同名方法冲突

    一.Http请求谓词特性(解决方法同名冲突问题的一个方案) 关于Http谓词特点:经常使用,如果不加上该特性,默认动作方法接收所有谓词的请求一般开发中都会加上谓词,限定请求谓词类型 二.NonActi ...

  5. 利用scons构建project

    scons有非常多相对于make构建系统的优秀特性,可是因为发展时间比較短如今的应用范围还是不太多,可以找到的资料也不是非常多. scons如今一大问题就是初始上手还是有点难度的,对于有python的 ...

  6. hdu 5950 Recursive sequence

    题意:告诉你数列的递推公式为f(n+1)=f(n)+2*f(n-1)+(n+1)^4 以及前两项a,b:问第n项为多少,结果对2147493647取模. 题解:有递推公式,马上应该就能想到矩阵快速幂: ...

  7. Analyze提示:Value stored to &quot;***&quot;is never read

    text这个变量没有被使用,在当前类中搜索'text'这个变量发现仅仅是被赋值并没有被使用. 提示意思是:删除或者凝视这行代码;

  8. myeclipse中Servlet出错

    在myeclipse中Servlet总是出错,执行的时候一直提示找不到出现404错误, 然后把代码拷贝到eclipse ee中就没有问题,一直不理解怎么回事. 然后发了好长时间试了好些方法,结果把my ...

  9. linux驱动之设备号与创建设备节点

    设备号: 1.自己主动分配 major = register_chrdev(0,"first_drv",&first_sdv_fops);//注冊 注冊设备时给设备号写0, ...

  10. Algorithmic Crush

    evendra在9号云上看到了他的教练朝他微笑. 每次教授选出Devendra单独问他一个问题,Devendra朦胧的头脑里全是他的教练和她的微笑,以至于他无法专注于其他事情.帮助他解决这个问题: 给 ...