<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
img {
border: none;
}
input, checkbox, select, img {
vertical-align: middle;
}
Inherited from div.wrap
.wrap {
text-align: left;
}
body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {
list-style: none;
}
body {
color: #333;
font: normal 12px/24px Helvetica, Tahoma, Arial, sans-serif;
text-align: center;
}
body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {
list-style: none;
}
p{
height:100px;
}
.top_arrow {
border: 0 none;
bottom: 150px;
cursor: pointer;
display: block;
height: auto;
margin: 0;
opacity: 0.5;
padding: 0;
position: fixed;
right: 40px;
width: 35px;
z-index: 2147483647;
}
</style>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
<p>段落10</p>
<p>段落11</p>
<p>段落12</p>
<p>段落13</p>
<p>段落14</p>
<p>段落15</p>
<img alt="Top_arrow" id="top_arrow" class="top_arrow" src="top_arrow.png" style="display: block; cursor: pointer;">
<script type="text/javascript" src="top_arrow.js?20121128"></script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
img {
border: none;
}
input, checkbox, select, img {
vertical-align: middle;
}
Inherited from div.wrap
.wrap {
text-align: left;
}
body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {
list-style: none;
}
body {
color: #333;
font: normal 12px/24px Helvetica, Tahoma, Arial, sans-serif;
text-align: center;
}
body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {
list-style: none;
}
p{
height:100px;
}
.top_arrow {
border: 0 none;
bottom: 150px;
cursor: pointer;
display: block;
height: auto;
margin: 0;
opacity: 0.5;
padding: 0;
position: fixed;
right: 40px;
width: 35px;
z-index: 2147483647;
}
</style>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
<p>段落10</p>
<p>段落11</p>
<p>段落12</p>
<p>段落13</p>
<p>段落14</p>
<p>段落15</p>
<img alt="Top_arrow" id="top_arrow" class="top_arrow" src="top_arrow.png" style="display: block; cursor: pointer;">
<script type="text/javascript" src="top_arrow.js?20121128"></script>
</body>
</html>
js文件代码：
$(document).ready(function(){
//首先将#top_arrow隐藏
$("#top_arrow").hide();
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#top_arrow").fadeIn(400);
}
else
{
$("#top_arrow").fadeOut(400);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#top_arrow").click(function(){
$('body,html').animate({scrollTop:0},400);
return false;
});
});
//首先将#top_arrow隐藏
$("#top_arrow").hide();
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#top_arrow").fadeIn(400);
}
else
{
$("#top_arrow").fadeOut(400);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#top_arrow").click(function(){
$('body,html').animate({scrollTop:0},400);
return false;
});
});
});