jQuery实现的个性化返回底部与返回顶部特效代码


Posted in Javascript onOctober 30, 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>特效加工厂</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body
{
margin:0; padding:0; font-size:12px;
}
#main
{
width:910px; margin:0 auto; height:2000px;
}
.go{width:47px;height:106px;position:fixed;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));right:12px;bottom:25%; background-image:url("images/tobg.png"); background-repeat:no-repeat;}
.go a{background:url(images/a.png) no-repeat;display:block;text-indent:999em;width:37px;margin:5px;border:0;overflow:hidden;float:left; cursor:pointer;}
.go .top{background-position:0 0px;height:22px}
.go .feedback{background-position:0 -22px;height:32px}
.go .bottom{background-position:0 -55px;height:22px}
.go .top:hover{background-position:-38px -0px}
.go .feedback:hover{background-position:-38px -22px}
.go .bottom:hover{background-position:-38px -55px}
</style>
<script type="text/javascript">
 $(function () {
  $(".top").click(//定义返回顶部点击向上滚动的动画
  function () {
   $('html,body').animate({ scrollTop: 0 }, 700);
  });
  $(".bottom").click(//定义返回顶部点击向上滚动的动画
  function () {
   $('html,body').animate({ scrollTop: document.body.clientHeight }, 700);
  });
 })
</script>
</head>
<body>
<div id="main">
<div class="go">
  <a title="返回顶部" class="top"></a>
  <a title="如果您有意见,请反馈给我们!" class="feedback" href="#" target="_blank"></a>
  <a title="返回底部" class="bottom" ></a>
</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript中的面向对象介绍
Jun 30 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
C++中的string类的用法小结
Aug 07 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
js实现导航吸顶效果
Feb 24 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
自己动手写的javascript前端等待控件
Oct 30 #Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 #Javascript
JavaScript获取function所有参数名的方法
Oct 30 #Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 #Javascript
jQuery实现切换页面过渡动画效果
Oct 29 #Javascript
js实现跨域的4种实用方法原理分析
Oct 29 #Javascript
异步JS框架的作用以及实现方法
Oct 29 #Javascript
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python根据距离和时长计算配速示例
2014/02/16 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
python中的格式化输出用法总结
2016/07/28 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python制作词云图代码实例
2019/09/09 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
医学院学生求职简历的自我评价
2013/10/24 职场文书
中专毕业生自荐信
2013/11/16 职场文书
艺术教育实施方案
2014/05/03 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
如何使用Python实现一个简易的ORM模型
2021/05/12 Python