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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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
ADODB类使用
2006/11/25 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
Python中的多重装饰器
2015/04/11 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python版DDOS攻击脚本
2019/06/12 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
护理学专业推荐信
2013/12/03 职场文书
政工例会汇报材料
2014/08/26 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
2014年车间工作总结
2014/11/21 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Python基础之Socket通信原理
2021/04/22 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android