三分自留地

Follow your heart
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  4 Posts :: 2 Stories :: 1 Comments :: 0 Trackbacks
jquery 控制返回顶部 支持各浏览器 可简单集成

1、先发效果图  





























2、上页面
<!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=gbk" />
<title>Back to To TEST</title>
<LINK rel=stylesheet type=text/css href="css/lrtk.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
    });
 
    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},2000);
        return false;//返回false可以避免在原链接后加上# 
    });    
});
</script>
</head>
<body>
<div style="DISPLAY: none" id="toTop"><IMG border=0 src="images/top.gif"></div>


<div id="main" style="width:1000px;padding-top:200px;height:2000px;background:#eee; margin:0 auto;text-align:center">
  <h1>请滚动右侧滚动条查看效果</h1>
</div>

</body>
</html>



3、CSS 代码
#toTop {
POSITION: fixed;
TEXT-ALIGN: center;
LINE-HEIGHT: 30px;
WIDTH: 60px;
BOTTOM: 65px;
HEIGHT: 63px;
FONT-SIZE: 12px;
CURSOR: pointer;
RIGHT: 30px;
_position: absolute;
_right: auto
}


示例地址：/Files/ityouknow/back_top.zip





posted on 2013-01-22 21:44 大山 阅读(184) 评论(1)  编辑  收藏

Feedback

# re: jquery 控制返回顶部 2013-01-23 17:56 carlit
@免费网络记事本
不好意思，才刚研究呢。  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: