这是个很简单,但是很实用的功能,其实一般都懂回到网页顶部,只需要类似设置锚点,最快的方法就是将href的值给#号就行了,但是最近一般都在追求用户体验,直接一瞬间到顶部确实感觉不是很舒服。网上给出了很多教程,但是我仍然觉得需要自己整理下,而且这些代码复制粘贴就可以直接用得上,节约之后的开发时间。
html代码如下:
<div class="gotop">
<a href="javascript:;">Top</a>
</div>
就这么简单,可以放在body标签对中任意位置。
CSS样式如下:
.gotop{position:fixed;
bottom:10px;
right:10px;
width:50px;
height:50px;
background: #14a5c0;
text-align:center;
line-height:50px;
font-size:16px;
font-weight:600;
opacity:0.9;
display:none;}
.gotop a{display:block;
width:100%;
height:100%;
color:#fff;}
样式定义按钮的形状,颜色,半透明属性和相对于页面的位置,设置按钮默认不显示。
js代码如下(注意,需要在页面上引入jquery)
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()<=100){
$(".gotop").fadeOut(500);
}else{
$(".gotop").fadeIn(500);
}
})
$(".gotop").click(function(){
$('body,html').animate({scrollTop:0},500);
})
});
意思就是,在网页加载完毕后,当滚动条移动到距离头部100像素的时候,回顶部的按钮出现,当距离小于100像素的时候,按钮隐藏。
效果图如下:
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.ruletree.club/archives/756/