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

赞 (0)

相关推荐

  • jquery网页回到顶部效果(图标渐隐,自写)

    唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~ 原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就尝试写了下,唔,没发现,还挺easy的说~~ 有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~ 复制代码 代码如下: <pre name="code" class="javascript">//回到顶部js $(function(){ v

  • js+JQuery返回顶部功能如何实现

    js+JQuery返回顶部功能如何实现

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以

  • 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="Co

  • jQuery实现分章节锚点“回到顶部”动画特效代码

    jQuery实现分章节锚点“回到顶部”动画特效代码

    本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

  • 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=&qu

  • jquery实现点击页面回到顶部

    jquery实现点击页面回到顶部

    a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔[有时间就写] 1)首先我们写好DOM结构.写好CSS样式表 /* HTML */ <div style="wid

  • jQuery回到顶部的代码

    jQuery回到顶部的代码

    在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果.感兴趣的朋友跟着小编一起看下实现代码吧. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top">

  • 如何利用JQuery实现从底部回到顶部的功能

    今天给大家介绍一下如何利用jQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能.废话不多说,下面就给出这么一个例子介绍一下,它是怎么实现的. 实现方法一: <footer> <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p> <div id="tbox"

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

    jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

      复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

  • jQuery实现简单的回到顶部totop功能示例

    本文实例讲述了jQuery实现简单的回到顶部totop功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style type="text/css"> body{ width: 100%; height: 10000px; } #totop{ wid

  • jquery实现的动态回到顶部特效代码

    jquery实现的动态回到顶部特效代码

    本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

随机推荐