Totop标签如何实现

来源：互联网发布：姓张的网络歌手男歌手编辑：程序博客网时间：2024/05/21 08:58

当页面中出现了像如下的totop标签，如何实现？要求：开始时是隐藏的，在页面拖拽到一定距离时才出现，totop的过程有动画的效果。

4.1首先，定义html

<spanclass="totop">

<ahref="#"><iclass="icon-chevron-up"></i></a>

</span>

4.2然后，是css

.totop {

position: fixed;

//为什么不用absolute?因为我们是以body为定位对象，根据浏览器窗口进行元素定位。

//absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对

//定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框

bottom: 0px;

right: 0px;

z-index: 104400;

background: #fa3031;

}

.totop a, .totopa:visited, .totop a:hover{

display: block;

width: 30px;

height: 30px;

color: #fff;

text-align: center;

line-height: 30px;

text-decoration:none;

}

4.3 JavaScript代码

$(".totop").hide();

$(function () {

$(window).scroll(function () {

if($(this).scrollTop()>300){

$('.totop').slideDown();

}else{

$('.totop').slideUp();

}

});

$('.totop a').click(function (event) {

event.preventDefault();

$('body,html').animate({scrollTop:0},500);

})

});

4.4最终效果

0 0