<!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. noip模拟赛 水题

    题目描述 LYK出了道水题. 这个水题是这样的:有两副牌,每副牌都有n张. 对于第一副牌的每张牌长和宽分别是xi和yi.对于第二副牌的每张牌长和宽分别是aj和bj.第一副牌的第i张牌能覆盖第二副牌的第 ...

  2. SpringBoot @ConditionalOnBean、@ConditionalOnMissingBean注解源码分析与示例

    前言: Spring4推出了@Conditional注解,方便程序根据当前环境或者容器情况来动态注入bean,对@Conditional注解不熟悉的朋友可移步至 Spring @Conditional ...

  3. Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据

    表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交.要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾.jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码 ...

  4. php处理管道文件流

    <?php #!/usr/local/bin/php -q function read(){ $fp = fopen("php://stdin", "r" ...

  5. P1656 炸铁路 洛谷

    https://www.luogu.org/problem/show?pid=1656 题目描述 因为某国被某红色政权残酷的高压暴力统治.美国派出将军uim,对该国进行战略性措施,以解救涂炭的生灵. ...

  6. CHAPTER 1 Architectural Overview of Oracle Database 11g

    Which SGA structures are required, and which are optional? The database buffer cache, log buffer, an ...

  7. 运行系统命令而且将输出写到指定日志文件的shell脚本(2)

    上一篇是个简单的能够运行而且写入日志的脚本,可是假设放到生产环境上就显得太粗糙了,所以须要进一步的优化: #! /bin/bash if [ -d "/opt/bmc" ] ; t ...

  8. 已知目标qps跟并发用户数20，压测平均响应时间实例

    Jmeter性能测试案例(一) 转:https://blog.csdn.net/lovesoo/article/details/78579547 测试需求:测试20个用户访问网站在负载达到30QPS时 ...

  9. VFL语言简洁

    一.VFL语言简洁 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码.为我们简化了许多代码量. 二.使用步骤 使用步骤 ...

  10. Android MaoZhuaWeiBo 好友动态信息列表数据抓取 -3

    前面2篇把大致的开发说的几乎相同了,接下来说说粉丝动态消息列表或时间线数据的抓取与解析显示,我将他所有写在了一个 类里.并以封装类对象的形式存储数据.以下看看基本的服务代码: 粉丝动态消息列表数据抓取 ...