首页
所有分类
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 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jQuery 跨域访问问题解决方法
Dec 02 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
函数式编程入门实践（一）
Apr 20 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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
sortInts(1) Apache(17) Hudi(1) 数据处理(2) WebSockets(3) GUI(2) apply(1) Tkinter(4) Pool(1) feDisplacementMap(1)
You might like
PHP的变量类型和作用域详解
2014/03/12 PHP
Yii快速入门经典教程
2015/12/28 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
详解PHP队列的实现
2019/03/14 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python代码实现ID3决策树算法
2017/12/20 Python
python实现烟花小程序
2019/01/30 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
纽约JewelryAffairs珠宝店：精细金银时尚首饰
2017/02/05 全球购物
荷兰本土平价百货：HEMA
2017/10/23 全球购物
法律专业推荐信范文
2013/11/29 职场文书
中年人生感言
2014/02/04 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL