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 使用手册(五)
Sep 23 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JS获取时间的方法
Jan 21 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
详解JavaScript 事件流
Sep 02 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实现文件上传二法
2006/10/09 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
jQuery事件用法详解
2016/10/06 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
js实现转动骰子模型
2019/10/24 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Django REST framework 视图和路由详解
2019/07/19 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
django框架中间件原理与用法详解
2019/12/10 Python
python str字符串转uuid实例
2020/03/03 Python
Python 求向量的余弦值操作
2021/03/04 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
.NET概念性的面试题
2012/02/29 面试题
工作自我评价范文
2015/03/05 职场文书
学习雷锋主题班会
2015/08/14 职场文书