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 相关文章推荐
DOM基础教程之使用DOM
Jan 19 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
几道Web/Ajax的面试题
2016/11/05 面试题
员工自我鉴定
2013/10/09 职场文书
数据员岗位职责
2013/11/19 职场文书
大学校庆邀请函
2014/01/11 职场文书
售后服务承诺书
2014/03/26 职场文书
空乘英文求职信
2014/04/13 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书