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 相关文章推荐
js 采用delete实现继承示例代码
May 20 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
javascript入门教程基础篇
Nov 16 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
原生JavaScript实现进度条
Feb 19 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可变函数的使用详解
2013/06/14 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php微信公众平台开发类实例
2015/04/01 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python模拟事件触发机制详解
2018/01/19 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
树莓派升级python的具体步骤
2020/07/05 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
公务员的自我鉴定
2013/10/26 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
党员承诺践诺书
2014/05/20 职场文书
村党支部公开承诺书
2014/05/29 职场文书
公安学专业求职信
2014/07/27 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL