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

页面导航:首页 > 网络编程 > JavaScript > jQuery实现返回顶部效果的方法

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

来源:互联网 作者:脚本宝典 时间:2015-06-01 13:52 【

这篇文章主要介绍了jQuery实现返回顶部效果的方法,涉及jQuery页面样式、鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下

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

1、首先是CSS样式:

?
1
2
3
4
5
6
7
/*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、引用页面:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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程序设计有所帮助。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<