返回顶部js代码jquery版本

最新推荐文章于 2021-10-31 23:25:52 发布

郭敦松

最新推荐文章于 2021-10-31 23:25:52 发布

阅读量532

点赞数

返回顶部js代码，这个是jquery版本的。好简单的功能。建议使用有趣的图片来制作那个js返回顶部按钮，会更有趣。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>返回顶部js代码jquery版本 - 前端路上 </title>
<style>
#gotop{width:40px;height:40px;overflow:hidden;
position:fixed;right:6px;bottom:6px;    z-index:99999;     border-radius:4px;
background-color:#999;color:#fff;line-height:45px;text-align:center;font-size:36px;font-family:Tahoma, Geneva;/*这一行完全可以删除换成图片，好的图片会更漂亮，更有趣*/
/*display:none;*/}
*html{background-image:url(about:blank);background-attachment:fixed;/*兼容IE6,去抖动的*/}
*html #gotop{_position:absolute;_top:expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight);/*兼容IE6的*/}
#gotop:hover{background-color:#333;/*这一行完全可以删除换成图片，好的图片会更漂亮，更有趣*/}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $("body").append("<a href='javascript:void(0);' id='gotop' οnfοcus='this.blur()'>^</a>");
    $(window).bind('scroll',function() {
        var w_scrollTop = $(window).scrollTop();
        if(w_scrollTop > 150){
            $("#gotop").fadeIn(600);
        }
        else if(w_scrollTop < 200){
            $("#gotop").fadeOut(600);
        }
    });
    $("#gotop").click(function() {
        $("html,body").animate({ scrollTop:0},400);
        return false;
    });
});
</script>
</head>

<body>
<p><a href="http://www.51xuediannao.com/qd63/"> 前端路上 </a>是<a href="http://www.51xuediannao.com/"> 懒人建站 </a>的博客。<br/><a href="http://www.51xuediannao.com/qd63/"> 前端路上博客</a>的灵魂：学习、发现、分享、交流</p>
<p style="height:2000px;">

</p>
</body>

</html>

郭敦松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
返回顶部js代码jquery版本

返回顶部js代码，这个是jquery版本的。好简单的功能。建议使用有趣的图片来制作那个js返回顶部按钮，会更有趣。返回顶部js代码jquery版本 - 前端路上#gotop{width:40px;height:40px;overflow:hidden;position:fixed;right:6px;bottom:6px; z-index:99999;
复制链接

扫一扫