jquery小demo——返回顶部

最新推荐文章于 2021-04-12 11:41:45 发布

dengyu6119

最新推荐文章于 2021-04-12 11:41:45 发布

阅读量74

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/cacti/p/5188790.html

版权

此文闲来无事写了个返回顶部小demo，当文档高度大于窗口高度时，返回顶部按钮显示，否则隐藏。

具体代码见下：

<!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>jquery返回顶部</title>
<script src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
.backToTop{ 
display:none;
width:18px; 
line-height:1.2; 
padding:5px 0; 
background-color:#000;
color:#fff;
font-size:12px;
text-align:center;
position:fixed;
/*_position:absolute;*/
right:10px;
bottom:10px;
/*_bottom:"auto";*/
cursor:pointer;
opacity:0.6;
}
</style>
</head>

<body>
<div class="backToTop">返回顶部</div>
换行<br />
换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />换行<br />
<script>
$(function(){
    var backToTop=$('.backToTop');
    $('.backToTop').click(function(){
        $("html, body").animate({scrollTop: 0 }, 120);
    });
    $backToTopFun = function() {
        var st = $(document).height(), winh = $(window).height();
        (st > winh)? backToTop.show(): backToTop.hide();    
    };
    $(window).bind("scroll",$backToTopFun);
    
})
</script>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/cacti/p/5188790.html

dengyu6119

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery小demo——返回顶部

此文闲来无事写了个返回顶部小demo，当文档高度大于窗口高度时，返回顶部按钮显示，否则隐藏。具体代码见下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><h...
复制链接

扫一扫