jQuery实现返回顶部效果的方法


Posted in Javascript onMay 29, 2015

本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下:

1、首先是CSS样式:

/*updown*/ 
#shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} 
#shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0} 
#shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px} 
#xia{background-position:0 -376px} 
#comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px} 
#xia:hover{background-position:-31px -376px}

2、接着是jquery代码:(要引入jQuery核心库)

/*updown*/  

jQuery(document).ready(function($) {$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");$("#shang").mouseover(function() {up()}).mouseout(function() {clearTimeout(fq)}).click(function() {$body.animate({scrollTop: 0},400)});$("#xia").mouseover(function() {dn()}).mouseout(function() {clearTimeout(fq)}).click(function() {$body.animate({scrollTop: $(document).height()},400)});$("#comt").click(function() {$body.animate({scrollTop: $("#comments").offset().top},400)});});function up() {$wd = jQuery(window);$wd.scrollTop($wd.scrollTop() - 1);fq = setTimeout("up()", 50)};function dn() {$wd = jQuery(window);$wd.scrollTop($wd.scrollTop() + 1);fq = setTimeout("dn()", 50)};

3、引用页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
  <base href="<%=basePath%>"> 
  <title>My JSP 'index.jsp' starting page</title> 
  <meta http-equiv="pragma" content="no-cache"> 
  <meta http-equiv="cache-control" content="no-cache"> 
  <meta http-equiv="expires" content="0">   
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  <meta http-equiv="description" content="This is my page"> 
  <!-- 
  <link rel="stylesheet" type="text/css" href="styles.css"> 
  --> 
  <style type="text/css"> 
    /*updown*/ 
    #shangxia{position:fixed;top:60%;right:50%;margin-right:-543px;display:block;_display:none} 
    #shang,#comt,#xia{background:url(images/sprite.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0} 
    #shang{background-position:0 -308px}#comt{background-position:0 -338px;height:32px}#xia{background-position:0 -376px} 
    #comt:hover{background-position:-31px -338px}#shang:hover{background-position:-31px -308px}#xia:hover{background-position:-31px -376px} 
    /*存档*/ 
  </style> 
  ///上面的是内部样式,上面已经有外部样式,如果不使用内部样式可以引入外部样式 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
  <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
  <script type="text/javascript" src="js/updown/devework.js"></script>
 </head> 
 <body> 
  <p>1</p> 
  <p>1</p> 
   <p>1</p> 
   <p>1</p> 
    <p>1</p> 
    <p>1</p> 
  <p>1</p> 
   <p>1</p> 
   <p>1</p> 
    <p>1</p> 
    <p>1</p> 
  <p>1</p> 
   <p>1</p> 
   <p>1</p> 
    <p>1</p> 
    <p>1</p> 
  <p>1</p> 
   <p>1</p> 
   <p>1</p> 
    <p>1</p> 
    <p>1</p> 
  <p>1</p> 
   <p>1</p> 
   <p>1</p> 
    <p>1</p> 
    <p>1</p> 
  <p>1</p> 
   <p>1</p> 
   <p>1</p> 
    <p>1</p> 
    <p>1</p> 
  <p>1</p> 
   <p>1</p> 
   <p>1</p> 
    <p>1</p> 
    <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
       <p>333</p> 
    <p>333</p> 
     <p>333</p> 
     <p>333</p> 
      <p>333</p> 
      <p>333</p> 
       <p>333</p> 
    <div id="shangxia"> 
      <div id="shang" title="↑ 返回顶部"></div> 
      <div id="comt" title="沙发还没有被抢哦"></div> 
      <div id="xia" title="↓ 移至底部"></div> 
    </div> 
 </body> 
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 #Javascript
Jquery动态添加输入框的方法
May 29 #Javascript
jquery任意位置浮动固定层插件用法实例
May 29 #Javascript
JQuery控制Radio选中方法分析
May 29 #Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 #Javascript
js实现发送验证码后的倒计时功能
May 28 #Javascript
JS实现两表格里数据来回转移的方法
May 28 #Javascript
You might like
php 时间计算问题小结
2009/01/04 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python连接字符串的方法小结
2015/07/13 Python
简介Django中内置的一些中间件
2015/07/24 Python
Python守护线程用法实例
2017/06/23 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
送餐员岗位职责范本
2014/02/21 职场文书
访谈节目策划方案
2014/05/15 职场文书
网络营销计划书
2015/01/17 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
一文搞懂python异常处理、模块与包
2021/06/26 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers