jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效
<!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制作顶部与左侧锚点板块定位功能带动画跳转特效的更多相关文章
- jQuery之锚点带动画跳转特效
背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery制作div板块拖动层排序
html结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ElementUI 复杂顶部和左侧导航栏实现
描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...
- jQuery制作弹出窗（模态框）
来源:(二少)在南极 ##index.html <!DOCTYPE html><html lang="zh"><head> <meta c ...
- jquery制作论坛或社交网站的每天打卡签到特效
效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...
- 如何使用jQuery 制作全屏幕背景的嵌入视频
实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...
- jQuery网站顶部定时折叠广告
效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- jquery返回顶部，支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
随机推荐
- noip模拟赛 whzzt-Warmth
分析:这道题难度和天天爱跑步差不了多少啊......裸的暴力只有10分,最好大的还是那个5%的数据,不过这也才15分,比天天爱跑步的暴力分不知道少到哪里去了. 正解是dp,毕竟要求方案数嘛,但是这个d ...
- [bzoj2879][网络流，动态加边]美食节[Noi2012]
就是bzoj1070的加强版,数据规模扩大了n倍,这样要是一次把所有边都加进去的话就爆炸了,,所以使用单路增广,增广过一条边后在加入下一条边. //By hzwer 1 #include<ios ...
- FFT模板（From MG）
#include<cstdio> #include<cmath> #include<algorithm> using namespace std; struct c ...
- one troubleshooting case about em access issue
Today when trying to open my Oracle EM url, I can not open it. So I thought may be the network is ha ...
- uva 10716 Evil Straw Warts Live(贪心回文串)
这道题目我用了一上午才做出来,还是看的别人的思路,尽管没有看代码做的有点慢.代码能力还是得加强啊.思维 得缜密.不能想当然,要有根据,写上的代码要有精确度.省的以后还得慢慢调试 思路:贪心.每次都查看 ...
- 面向对象设计:共性VS个性-------继承的粒度和聚合的粒度以及类的重构
共性和个性 依据面向对象的原理.类是对象的抽象.也就是说.类是一系列的既有共性又有个性的对象的高度概括,类的属性和方法代表了隶属于该类的全部对象的共性,类的每一个对象实例都能够有不同的属性值,这反映了 ...
- TomCatserver的安装,环境的配置,服务的启动以及验证---ShinePans
首先下载 TomCat 6: http://yunpan.cn/cg5icf3dha4k3 提取码 34c5 然后配置环境变量: 电脑>>>属性>>>高级系统设置 ...
- Android 自己定义Activity基类
我们在开发App的时候有时候碰到多个界面有一个共同点的时候.比方,都有同样的TitleBar.而且TitleBar能够设置显示的文字.TitleBar上的点击事件,假设给每个Activity都写一遍T ...
- android实现跑马灯效果（能够实现两个以上跑马灯）
本文用了继承自TextView的MarqueeTextView来实现跑马灯效果.原因是,跑马灯效果是须要TextView拥有焦点才会跑动的.而有时候TextView获得焦点会有点耗时,造成要等待一段时 ...
- vijos - P1302连续自然数和 (公式推导 + python)
P1302连续自然数和 Accepted 标签:[显示标签] 描写叙述 对一个给定的自然数M,求出所有的连续的自然数段(连续个数大于1).这些连续的自然数段中的所有数之和为M. 样例:1998+199 ...