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()来实现流程的向上滚动的返回到顶部的 ...
随机推荐
- 算（tyvjP4700）
背景 zhx和他的妹子出去玩. 描述
- 在设计DJANGO用户更改密码时，出现NoReverseMatch at /account/password-change/这种妖精如何办？
网上看到很多解决办法.但对于我来说, 好像加个post_change_redirect这个参数是最有效的. from django.conf.urls import url from . import ...
- [poj1678]I Love this Game!_博弈论
I Love this Game! 题目大意:题目链接 注释:略. 想法: 开始的时候以为没法dp,结果...:a>0啊! 所以可以直接dp了啊! 状态:dp[i]表示先手选了a[i]的状态. ...
- Java AOP 获取HttpSevletRequest、HttpSevletResponse、HttpSession对象
((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()) ((ServletRequestAttributes) ...
- uva 11212 - Editing a Book(迭代加深搜索 IDA*) 迭代加深搜索
迭代加深搜索 自己看的时候第一遍更本就看不懂..是非常水,但智商捉急也是没有办法的事情. 好在有几个同学已经是做过了这道题而且对迭代加深搜索的思路有了一定的了解,所以在某些不理解的地方询问了一下他们的 ...
- 学习node js 之微信公众帐号接口开发 准备工作
绪:因工作须要,近期開始学习Node js,之前隐隐约约听到过node js 但没有实际见到过,仅仅好google了:至于什么是node js,能做些什么,有多么好.或者有哪些弊端我这里就不多说了,由 ...
- Workspace in use or cannot be created, choose a different one.--错误解决的方法
eclipse 使用一段时间后.有时会由于一些故障自己就莫名奇异的关闭了,再打开时有时没有问题,有时有会提示错误 Workspace Unavailable: Workspace in use or ...
- js滚轮换切屏
因为全项目不是自己写的,仅仅是帮别人写js滚轮代码,并且别人项目也还未上线.所以仅仅贴出自己写的那段部分代码, 效果:鼠标滚轮滚动时.网頁屏幕一屏一屏的上下切换 (下面代码在本地电脑的IE,chrom ...
- POJ2481：Cows(树状数组)
Description Farmer John's cows have discovered that the clover growing along the ridge of the hill ( ...
- Android资源之图像资源（图像级别资源）
图像状态资源仅仅能定义有限的几种状态. 假设须要很多其它的状态,就要使用图像级别资源. 在该资源文件里能够定义随意多个图像级别. 每一个图像级别是一个整数区间,能够通过ImageView.setIma ...