jQuery实现带有动画效果的回到顶部和底部代码


Posted in Javascript onNovember 04, 2015

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码。分享给大家供大家参考,具体如下:

这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果。

运行效果截图如下:

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>
<title>动画版的回到顶部和底部效果代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{padding:0px;margin:0px;}
#roll_top,#fall,#ct{position:relative;cursor:pointer;height:40px;width:15px;}
#roll_top{background:url(images/roll.png) no-repeat;}
#fall{background:url(images/roll.png) no-repeat 0 -80px;}
#ct{background:url(images/roll.png) no-repeat 0 -40px;}
#roll{display:block;width:15px;margin-right:-508px;position:fixed;right:50%;top:50%;_margin-right:-507px;_position:absolute;_margin-top:300px;_top:expression(eval(document.documentElement.scrollTop));}
</style>
<!--[if IE]>
<style type="text/css">
/* 修正IE6振动bug */
html,body{background-image:url(about:blank);background-attachment:fixed;}
</style>
<![endif]-->
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
  $('#roll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
  $('#ct').click(function(){$('html,body').animate({scrollTop:$('.ct').offset().top}, 800);});
  $('#fall').click(function(){$('html,body').animate({scrollTop:$('.footer,.footer_a').offset().top}, 800);});
});
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了<br>
<div class="head">这里是页面顶部</div>
<div id="roll">
  <div title="回到顶部" id="roll_top"></div>
  <div title="转到底部" id="fall"></div>
</div>
<div id="content" style="height:2000px;"></div>
<div class="footer">这里是页面底部</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
简单的jQuery入门指引
Jul 28 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 #Javascript
js实现二级菜单渐隐显示
Nov 03 #Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
jQuery实用技巧必备(下)
Nov 03 #Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 #Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
PHP 数组入门教程小结
2009/05/20 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
教师实习自我鉴定
2013/12/13 职场文书
春节活动策划方案
2014/01/24 职场文书
大学社团活动策划书
2014/01/26 职场文书
机电一体化专业求职信
2014/07/22 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python