<!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. node.js 核心http模块，起一个服务器，返回一个页面

    let http=require("http"); //引入核心http模块 let fs=require("fs"); let mime={ '.js':'a ...

  2. vsftpd conf 解釋

    Linux中vsFTP位置约定:/usr/sbin/vsftpd ---- VSFTPD的主程序/etc/rc.d/init.d/vsftpd ---- 启动脚本/etc/vsftpd/vsftpd. ...

  3. [JavaEE] JTA, Java Transaction API, Repository for DB opreations

    Mainly two things: 1. For all the creating and deleting opreations for the DB, we want to use 'REQUI ...

  4. Mac OS忘记password怎么办？无光盘破解Mac OS的管理员password

    mac系统10.8.5升级10.10 出现故障,重新启动系统无法登陆,降级系统10.9 后更新10.9.3 finder无法打开,root权限没了,又再一次覆盖安装10.9(为了保护原系统文件.所以覆 ...

  5. POJ 1861 Network (Kruskal求MST模板题)

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 14103   Accepted: 5528   Specia ...

  6. Oracle,mysql,sqlserver,postgresql语句几点比較

    1.分页 Oracle: SELECT * FROM(SELECT A.*, ROWNUM RN FROM (select T.* from sj_receiptinfo t WHERE t.TAXN ...

  7. 使用引导扇区维护工具BOOTICE编辑系统启动列表BCD文件

    使用引导扇区维护工具BOOTICE编辑系统启动列表BCD文件 系列文章: 笔记本电脑提速之加装内存条.SSD固态硬盘.光驱位换SSD固态硬盘 笔记本ThinkPad E430c加装内存和SSD固态硬盘 ...

  8. android note【转】

    本文转载自:http://blog.csdn.net/u012719256/article/details/52094982 1.重要的property属性 #define ANDROID_RB_PR ...

  9. 【总结】嵌入式linux内核中Makefile、Kconfig、.config的关系及增加开机Hello World【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/73772109 为了弄清内核的组织结构,我们先来实现下面这个简单的例子. 一.增加 ...

  10. （多项式）因式分解定理（Factor theorem）与多项式剩余定理（Polynomial remainder theorem）（多项式长除法）

    (多项式的)因式分解定理(factor theorem)是多项式剩余定理的特殊情况,也就是余项为 0 的情形. 0. 多项式长除法(Polynomial long division) Polynomi ...