脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery带有动画效果的回到顶部和底部

jQuery实现带有动画效果的回到顶部和底部代码

 更新时间：2015年11月04日 09:33:03   作者：企鹅  
这篇文章主要介绍了jQuery实现带有动画效果的回到顶部和底部代码,涉及jQuery响应鼠标事件动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码。分享给大家供大家参考，具体如下：

这款动画版的回到顶部和底部效果代码，也算是比较常见的一款网页特效了，像淘宝网就有这种效果，使用了jQuery插件，加入了动画效果。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/

具体代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    这篇文章主要介绍了jQuery插件FusionCharts绘制的2D条状图效果,结合完整实例形式分析了jQuery使用FusionCharts插件绘制2D条状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-05-05
  • 详谈jQuery中的this和$(this)

    详谈jQuery中的this和$(this)

    在使用jquery操作js时，经常弄不明白this与$(this)。最近不是很忙，抽空仔细研究了一下，记录下来以供在忘记的时候拉出来参考参考！
    2014-11-11
  • jquery将一个表单序列化为一个对象的方法

    jquery将一个表单序列化为一个对象的方法

    将表单序列化为一个对象的方法有很多，在本文为大家介绍下使用jquery是如何做到的，感兴趣的朋友可以参考下
    2014-01-01
  • jQuery实现给input绑定回车事件的方法

    jQuery实现给input绑定回车事件的方法

    这篇文章主要介绍了jQuery实现给input绑定回车事件的方法,结合实例形式分析了2种常用的事件绑定操作技巧,需要的朋友可以参考下
    2017-02-02
  • 使用jQuery中的wrap()函数操作HTML元素的教程

    使用jQuery中的wrap()函数操作HTML元素的教程

    wrap(),顾名思义,就是包裹的意思,就是在你所在器外层包裹一层东西,接下来我们就详细来看使用jQuery中的wrap()函数操作HTML元素的教程:
    2016-05-05
  • 一个基于jquery的图片切换效果

    一个基于jquery的图片切换效果

    一个图片切换效果，胡乱写了一下。貌似doctype到了html4.01下面样式有点问题。
    2010-07-07
  • jquery popupDialog 使用 加载jsp页面的方法

    jquery popupDialog 使用 加载jsp页面的方法

    下面小编就为大家带来一篇jquery popupDialog 使用 加载jsp页面的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • jQuery中:hidden选择器用法实例

    jQuery中:hidden选择器用法实例

    这篇文章主要介绍了jQuery中:hidden选择器用法,以实例形式较为详细的分析了:hidden选择器的功能、定义及设置匹配元素不可见时的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery实现菜单的显示和隐藏功能示例

    jQuery实现菜单的显示和隐藏功能示例

    这篇文章主要介绍了jQuery实现菜单的显示和隐藏功能,结合实例形式分析了jQuery基于事件响应及css方法动态改变菜单样式的相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • jQuery+ajax读取并解析XML文件的方法

    jQuery+ajax读取并解析XML文件的方法

    这篇文章主要介绍了jQuery+ajax读取并解析XML文件的方法,涉及jQuery的ajax方法调用xml文件及针对xml数据的遍历与节点操作相关技巧,需要的朋友可以参考下
    2016-09-09

最新评论