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

jQuery中scrollTop获取匹配元素相对滚动条顶部的偏移（此方法对可见和隐藏元素均有效。）

2014-10-04 23:16 771 查看

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>webrx-title</title>

<script src="js/jquery-1.11.1.min.js"></script><style>

/*returnTop*/

p#back-to-top{

position:fixed;

display:none;

bottom:100px;

right:80px;

}

p#back-to-top a{

text-align:center;

text-decoration:none;

color:#d1d1d1;

display:block;

width:64px;

/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

-moz-transition:color 1s;

-webkit-transition:color 1s;

-o-transition:color 1s;

}

p#back-to-top a:hover{

color:#979797;

}

p#back-to-top a span{

background-image:url(top1.png);

border-radius:6px;

display:block;

height:64px;

width:56px;

margin-bottom:5px;

/*使用CSS3中的transition属性给标签背景颜色添加渐变效果*/

-moz-transition:background 1s;

-webkit-transition:background 1s;

-o-transition:background 1s;

}

#back-to-top a:hover span{

background-image:url(top1.png);

}

</style>

<script>

$(document).ready(function(e) {

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function () {

$(window).scroll(function(){

if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头

$("#back-to-top").fadeIn(1500); //大于1500行时跳转箭头慢慢透明显示

}

else

{

$("#back-to-top").fadeOut(1500); //大于1500行时跳转箭头慢慢透明消失

}

});

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function(){

$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部

return false;

});

});

});

</script>

</head>

<body>

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

aaa bb aaa bb aaa bb aaa bb aaa bb aaa bb 

<a href="#top">返回顶部</a>

</body>
</html>

如图拉动滚动条到最后点击返回顶部，1秒钟时间慢慢回到顶部且图标颜色慢慢变淡到透明

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

标签： jquery scrollTop

相关文章推荐

新的分享

章节导航