网站实现小火箭到页面顶部的效果

网页中常常会有一个返回顶部的功能，点击这个小火箭就可以慢慢回到页面顶部，闲的没事，自己搞了一下。

<!--以下<a href="http://img.8gws.com/article/tag/css%e4%bb%a3%e7%a0%81/" title="查看与 css代码 相关的文章" target="_blank">css代码</a>--><br />
<style type="text/css"><br />
.bg_top{<br />
width: 100px;<br />
height: 110px;<br />
position: fixed;<br />
right: 30px;<br />
bottom: 50px;<br />
display: none;</p>
<p>}<br />
.bg_top img{<br />
width: 100px;<br />
height: 110px;<br />
transition: all 1s ease 0s;<br />
cursor: pointer;<br />
opacity: 0.6;<br />
}<br />
</style><br />
<!--以下代码添加到网页中--><br />
<div class="bg_top"><br />
<img src="http://img.8gws.com/wp-content/uploads/2024/04/bgtopimg-1.gif" alt="网站实现小火箭到页面顶部的效果" ><br />
</div><br />
<!--以下JS代码--><br />
<script src="https://li_shang_shan.gitee.io/small_rocket_back_to_top/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><br />
<script type="text/javascript"><br />
$(function(){<br />
$(window).scroll(function () {<br />
var scroll_top = $(document).scrollTop();<br />
if (scroll_top > 400) { //当向下滚动400px时,出现返回顶部链接<br />
$(".bg_top").show(300);<br />
} else {<br />
$(".bg_top").hide(300);<br />
}<br />
});<br />
$(".bg_top").click(function () {<br />
$("html,body").animate({scrollTop:0}, 1000);<br />
});<br />
$(".bg_top img").hover(function(){<br />
$(this).css({<br />
"opacity":1,<br />
"width":"90",<br />
"margin-top":"10px",<br />
});<br />
},function(){<br />
$(this).css({<br />
"opacity":0.6,<br />
"width":"100",<br />
"margin-top":"0",<br />
});<br />
});<br />
});<br />
</script>