回到头部

最新推荐文章于 2023-11-07 11:56:16 发布

攻城师张亚飞

最新推荐文章于 2023-11-07 11:56:16 发布

阅读量917

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/yf505261213/article/details/8952175

web 专栏收录该内容

25 篇文章

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#GoTop {
position: fixed;
right: 160px;
bottom: 50px;
display: none;
width: 20px;
height: 80px;
background: url("images/icon.png") right top no-repeat;
background-color: #eee;
background-position: -71px -90px;
border: solid 2px #eee;
font-size: 11px;
}

#GoTop:hover {
background-position: -96px -90px;
}
</style>
<script src="Jquery1.7.js"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= 100) {
$('#GoTop').fadeIn(1000);
} else {
$('#GoTop').fadeOut(1000);
}
});
$('#GoTop').hover(function () {
$(this).css('background-color', '#fafafa')
$('#fontdiv').css('background-color', '#fafafa')

}, function () {
$(this).css('background-color', '#eee')
$('#fontdiv').css('background-color', '#eee')
});
$('#GoTop').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); });
})
</script>
</head>
<body style="height: 1000px;">
<div id="GoTop">
<div id="fontdiv" style="background-color: #eee; margin-top: 25px;">
<div style="padding-left: 4px;">
返回顶部
</div>
</div>
</div>
</body>
</html>