发布作者: _北海彡
百度收录: 正在检测是否收录...
最后更新: 2025年 03月 01日 22:16
作品采用: 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
手搓出来个返回顶部的小组件,做的可能有点不好,欢迎各位大神可以改一改。
悬吊猫返回顶部小组件,一个比较实用的web小组件。用户滑到一定距离,点击右下角的悬吊猫即可滑动到顶部。
(∩╹∀╹∩)*❤
https://lgnb.asia/admin/demo/77-xuandiao
#### html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.bg_top{
width: 90px;
height: 500px;
position: fixed;
right: 30px;
bottom: 100%;
display: none;
}
.bg_top img{
width: 90px;
height: 1150px;
transition: all 1s ease 0s;
cursor: pointer;
opacity: 0.6;
}
</style>
</head>
<body>
<script src="http://cdn.staticfile.org/jquery/3.7.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function () {
var scroll_top = $(document).scrollTop();
if (scroll_top > 250) { //当向下滚动250px时,出现返回顶部链接
$(".bg_top").show(300);
} else {
$(".bg_top").hide(300);
}
});
$(".bg_top").click(function () {
$("html,body").animate({scrollTop:0}, 1000);
});
$(".bg_top img").hover(function(){
$(this).css({
"opacity":1,
"width":"90",
"margin-top":"100",
});
},function(){
$(this).css({
"opacity":0.6,
"width":"90",
"margin-top":"0",
});
});
});
</script>
<div class="bg_top">
<img src="https://lgnb.asia/admin/demo/77-xuandiao/appIcon.png">
</div>
<!--悬挂的喵 结束-->
</body>
</html>
—— 评论区 ——