jquery小demo——返回顶部

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery小demo——返回顶部相关的知识，希望对你有一定的参考价值。

此文闲来无事写了个返回顶部小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

 

以上是关于jquery小demo——返回顶部的主要内容，如果未能解决你的问题，请参考以下文章

常用小Demo：用js/jQuery实现回到页面顶部功能

js返回顶部小Demo

鼠标滚轮事件小demo

小程序各种功能代码片段整理---持续更新

几条jQuery代码片段助力Web开发效率提升

10个 jQuery 小技巧