您的位置：首页 > Web前端 > HTML

Html页面增加返回顶部图标和隐藏出现

2016-12-03 10:21 302 查看

效果如链接：http://liuyanzhao.com/

只需要i两个步骤：

1.我们在网页body内最上面添加一个，方便跳到这个位置

<span  name="gotop"></span>

2.在网页的末端添加一个：

<a href="#gotop" >
<img src="__PUBLIC__/img/backTop.png" id="gotop" alt="" style="position: fixed;bottom: 10px;display: none;">
</a>

为了让它页面已经在首部时，图标隐藏

加一段js代码：

<script>
$(function () {
$(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$("#gotop").fadeIn(1000);//一秒渐入动画
}else{
$("#gotop").fadeOut(1000);//一秒渐隐动画
}
});

$("#gotop").click(function(){
$('body,html').animate({scrollTop:0},1000);
});
});
});
</script>

本文地址：http://liuyanzhao.com/3629.html

转载请注明

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航