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 Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
vue请求数据的三种方式
Mar 04 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
高三自我鉴定范文
2013/10/19 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
精彩的英文自荐信
2014/01/30 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
保护水资源的标语
2014/06/17 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
python数据处理之Pandas类型转换
2022/04/28 Python