展会信息港展会大全

用jQuery实现的智能隐藏、滑动效果的返回顶部代码
来源:互联网   发布日期:2016-01-26 11:08:57   浏览:1414次  

导读:这篇文章主要介绍了用jQuery实现的智能隐藏、带滑动效果的返回顶部代码,非常实用,需要的朋友可以参考下在线DEMO:传送门HTML代码(放在页面任意位置,并用CSS美化):代码如下:p id=back-to-topa href= ...

这篇文章主要介绍了用jQuery实现的智能隐藏、带滑动效果的返回顶部代码,非常实用,需要的朋友可以参考下

在线DEMO:传送门

HTML代码(放在页面任意位置,并用CSS美化):

代码如下:<p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p>

JS代码:

代码如下:

<script type="text/javascript" src="js/jquery-1.7.2.min.js">

</script>

<script type="text/javascript">

$(document).ready(function() {

//首先将#back-to-top隐藏

$("#back-to-top").hide();

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

$(function() {

$(window).scroll(function() {

if ($(window).scrollTop() > 100) {

$("#back-to-top").fadeIn(1500);

} else {

$("#back-to-top").fadeOut(1500);

}

});

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

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

$('body,html').animate({

scrollTop: 0

},

1000);

return false;

});

});

});

</script>

赞助本站

人工智能实验室

相关热词: 滑动效果 返回顶部 jQuery

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港