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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
详解webpack打包vue时提取css
May 26 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
原生js封装的ajax方法示例
Aug 02 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
Vuex的API文档说明详解
Feb 05 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
深入了解php4(2)--重访过去
2006/10/09 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
django文档学习之applications使用详解
2018/01/29 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python装饰器原理与用法深入详解
2019/12/19 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
python中pickle模块浅析
2020/12/29 Python
阿里旅行:飞猪
2017/01/05 全球购物
挂职自我鉴定
2014/02/26 职场文书
党员承诺书格式
2014/05/21 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
介绍信格式
2015/01/30 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
oracle重置序列从0开始递增1
2022/02/28 Oracle