<!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. cogs——908. 校园网

    908. 校园网 ★★   输入文件:schlnet.in   输出文件:schlnet.out   简单对比 时间限制:1 s   内存限制:128 MB USACO/schlnet(译 by Fe ...

  2. Spring Boot在开发时实现热部署（开发时修改文件保存后自动重启应用）（spring-boot-devtools）

    热部署是什么 大家都知道在项目开发过程中,常常会改动页面数据或者修改数据结构,为了显示改动效果,往往需要重启应用查看改变效果,其实就是重新编译生成了新的Class文件,这个文件里记录着和代码等对应的各 ...

  3. 人人都是 DBA

    http://www.cnblogs.com/gaochundong/tag/DBA/

  4. spring mvc日期转换（前端到后端，后端到前端）

    在做web开发的时候,页面传入的都是String类型,SpringMVC可以对一些基本的类型进行转换,但是对于日期类的转换可能就需要我们配置. 1.如果查询类使我们自己写,那么在属性前面加上@Date ...

  5. CI 日志类

    开发ci的过程中,使用log能直观的看出代码运行到哪,还可设置代码查看数据接口的发送情况.日志类: <?php defined('BASEPATH') OR exit('No direct sc ...

  6. 拉普拉斯分布，高斯分布，L1 L2

    之前那篇文章里提到,L1其实是加上服从拉普拉斯分布的先验,L2是加上服从高斯分布的先验: http://www.cnblogs.com/charlesblc/p/7977732.html 那么记住拉普 ...

  7. How can I add files to a Jar file? (or add a file to a zip archive)

    https://stackoverflow.com/questions/12239764/how-can-i-add-files-to-a-jar-file M.java class M{ publi ...

  8. Ubuntu14 中安装 VMware10 Tools工具&lt;2&gt;

    网上说已经针对上一篇提到的无法显示共享文件夹的问题做了补丁.补丁地址是https://github.com/rasa/vmware-tools-patches,我没有成功,还是出现"hgfs ...

  9. 深入理解 JBoss 7/WildFly Domain 模式启动过程

    概述 JBoss 7/WildFly 以 domain 模式启动时会启动多个 JVM.比如例如以下通过启动脚本启动 domain 模式: ./domain.sh 启动后我们查看进程: [kylin@l ...

  10. Parallel and Perpendicular

    题目链接 题意: 输入n,求正n边形中的对角线1和对角线2的个数(对角线1:至少与其它一个对角线平行:对角线2:至少与其它一个对角线垂直).对角线不能是多边形的边 (4 ≤ n ≤ 10e5) 分析: ...