如何用jquery写一个简单的返回顶部

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

Eric_Tsai

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

阅读量515

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/Eric_Tsai/article/details/47029643

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话不多说，直接上代码

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
#header {
height: 45px;
background-color: #d0cccc;
}
#top{
position: fixed;
bottom:0;
right:0;
width:45px;
height:45px;
background:#d0cccc;
border-radius:50%;
}
</style>
</head>

<body style="height:900px;">
<div id="header"></div>
<div id="top"></div>
</body>
<script src="jquery-1.11.1.js"></script>
<script>
$(function() {
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // 这行是 Opera 的补丁, 少了它 Opera 是直接用跳的而且画面闪烁 by willin
$('#top').click(function() {
$body.animate({
scrollTop: $('#header').offset().top
}, 1000);
return false; // 返回false可以避免在原链接后加上#
});
});

});

$(function(){
$("#top").hide();
$(window).scroll(function(){
var clientH = $(window).height();
var scrollTop = $(window).scrollTop();
if(scrollTop > clientH/4){
$("#top").show();
}else{
$("#top").hide();
}
});
});
</script>

</html>

Eric_Tsai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用jquery写一个简单的返回顶部

话不多说，直接上代码 Document *{ margin:0; padding: 0; } #header { height: 45px; background-color: #d0cccc; } #top{ position:
复制链接

扫一扫