首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

wo_soul

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
Tab页界面，用jQuery及Ajax技术实现
Sep 21 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
javascript时间差插件分享
Jul 18 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 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
数据合并(1) 复合索引(1) location(2) 逻辑函数(1) zabbix(9) BufferPool(1) 连接查询(1) element-ui(1) 缓存机制(1) http_stub_status_module(1)
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
php生成圆角图片的方法
2015/04/07 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Python入门篇之对象类型
2014/10/17 Python
Python是编译运行的验证方法
2015/01/30 Python
python中的装饰器详解
2015/04/13 Python
Phantomjs抓取渲染JS后的网页（Python代码）
2016/05/13 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python实现决策树分类
2018/08/30 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python中Qslider控件实操详解
2021/02/20 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
公司门卫的岗位职责
2014/02/19 职场文书
技能竞赛活动方案
2014/02/21 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
学期个人工作总结
2015/02/13 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
党支部考察意见范文
2015/06/02 职场文书
话题作文之学会尊重
2019/12/16 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python