前言:我视代码如初恋,bug浮现又浮现
很多网站都会有那么一个返回顶部按钮,它并不是一开始就出现的,而是滑动一段距离才出现,话不多说,开始掉头发......先看初始化效果图
这是页面初始化的时候,右下角并没有出现返回顶部按钮(注意右侧滚动条处)
激活后效果图
这是页面向下滑动400px后出现的效果图,距离自己调(滚动条滚动条滚动条)
代码如下
html代码:
//先找一个长图做背景
//或者新建一个div直接给高度足够撑开页面
//或者技术高超有其他方法也行
<div class="pic"><img src="./固定定位长图背景.jpg" alt=""></div>
<a href="" class="top">top</a>
css代码:
//初始化,懂得都懂,不懂得我也不会解释
*{
margin:0;
padding:0;
}
.pic{
width:100%;
}
.pic img{
display:block;
width:100%;
}
//以上代码除了div高度有无都可,这不是写页面
//(这里没有div高度,因为我引用的图片高度足够)
//这是按钮样式
.top {
width:80px;
height:80px;
background-color:red;
color:#fff;
position:fixed;
bottom:20px;
right:20px;
//关键代码,页面初始是不显示的
display:none;
js代码:
//创建页面滚动函数
//这也是我发现一个bug的起点
$(window).scroll(function(){
//此处定义如果页面向下滑动400px top出现
//否则 display:none
if($(window).scrollTop() > 400){
$(".top").css("display", "block");
}else{
$(".top").css("display", "none");
}
})
//切记不要忘记引用js文件,不然不管用
//这个组件似乎也适用于导航栏下滑时固定在屏幕上方
//有兴趣的评论区一决高下
我怀疑有bug但我没有证据,是的,这段代码正常运行,但是问题就是太顺了,总觉得哪里不对,求大佬指点
总结
以上就是今天分享的小功能,功能不大但很有用,我会继续分享实用小功能,预知后事如何,且带我拯救m78星云回来继续