您的位置：首页 > 其它

实现回到顶部功能

2015-11-17 19:10 363 查看

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">参考实现demo : </span><a target=_blank href="http://www.cnblogs.com/beyondfengyu/archive/2013/03/28/2987823.html" target="_blank" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">jQuery实现回到顶部功能</a>

利用jQuery实现回到顶部功能，主要是用到了元素的定位属性（scrolltop等），参考文章：JQuery Div scrollTop ScrollHeight

另一方面也学习了从background-position的方法（抠图），参考文章 : CSS从大图中抠取小图完整教程(background-position应用)

1.html页面代码

<body>
<div class="gotoTop"></div>
<h1>Testing div Demo: GO TO TOP!</h1>
<div class="container">
噼里啪啦一段大段文字，可以放一片自己喜欢的散文，吼吼哈。。
</div>
</body>

2.css代码

<style>
body{
padding:0;
background-color:#aaa;
}
.container{
margin-left: 50px;
margin-right: 50px;

background-color: #fff;
color:#c0c0c0;
font-size:18px;
letter-spacing: 4px;

padding:10px;
border-radius: 10px;
}
.gotoTop{
display: none;
position: fixed;
right: 10px;
bottom: 10px;

width:50px;
height:50px;

background: #fff url(img/goTopOne.png) -70px 0;
}
.gotoTop:hover{
background: #fff url(img/goTopOne.png) 0 0;
}
</style>

3.js代码

<script>
function gotoTop(){
console.log("come in function gotoTop.");
$(window).scroll(function(){
console.log("scroll function.");
if($(window).scrollTop() >100){
$(".gotoTop").fadeIn(500);
}else{
$(".gotoTop").fadeOut(500);
}
});
}

$(function(){

$(".gotoTop").click(function(){
$('body,html').animate({scrollTop:0}, 1000);
});

gotoTop();
});
</script>

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

标签：

相关文章推荐

新的分享

章节导航