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 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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
人族 Terran 基本策略
2020/03/14 星际争霸
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
js代码实现轮播图
2020/05/04 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
pandas参数设置的实用小技巧
2020/08/23 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
应届生如何写自荐信
2014/01/05 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android