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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
详解js中==与===的区别
Jan 08 Javascript
JS返回顶部实例代码
Aug 09 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
JavaScript 闭包的使用场景
Sep 17 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 调用远程url的六种方法小结
2009/11/02 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python3访问并下载网页内容的方法
2015/07/28 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
东方通信股份有限公司VC面试题
2014/08/27 面试题
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
社区志愿者心得体会
2014/01/03 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
超市商业计划书
2014/05/04 职场文书
表彰大会策划方案
2014/05/13 职场文书
关于责任的演讲稿
2014/05/20 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL