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的eval JSON object问题
Nov 15 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
Node.js Event Loop各阶段讲解
Mar 08 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微信开发接入
2016/08/27 PHP
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
原生js轮播特效
2017/05/18 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python制作钉钉加密/解密工具
2016/12/07 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
如何用Python合并lmdb文件
2018/07/02 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
使用python绘制温度变化雷达图
2019/10/18 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
会计自我鉴定范文
2013/10/06 职场文书
生态学毕业生自荐信
2013/10/27 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
党建示范点实施方案
2014/03/12 职场文书
房屋委托书范本
2014/04/04 职场文书
运动会演讲稿50字
2014/08/25 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js