网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

jQuery返回顶部代码,带滑动效果

2016-1-20 15:22:31 | 作者:老铁SEO | 1个评论 | 人浏览

返回顶部图标:

在线预览:http://www.lingchenliang.com/demo/jquery/top/

下载地址:http://www.lingchenliang.com/demo/jquery/top.zip

<style type="text/css">
/*返回顶部CSS样式*/
/* left: 10px;靠左10px,可以自己改为靠右right: 10px; */
#top_div { display: none; position: fixed; left: 10px; bottom: 10px; width: 60px; height: 50px; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; opacity: 1; z-index: 100000; }
#top_div.off { opacity: 0; visibility: hidden; }
/*icon_top.png 为返回顶部图片,做为回到顶部按钮时的图标*/
#top_a { display: block; width: 60px; height: 50px; background: url(icon_top.png) center center no-repeat; background-color: #444; background-color: rgba(0,0,0,.6); border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; margin-bottom: 10px; }
#top_a:hover, #top_a:active { background-color: rgba(0,0,0,.7); }
</style>
<div id="top_div"><a id="top_a" onclick="return false;" title="回到顶部"></a></div>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//返回顶部jQuery代码,jQuery是一个优秀的JS库,还兼容各种浏览器
$(function(){
$(window).scroll(function(){
var scrolltop=$(this).scrollTop();
if(scrolltop>=100){ //100为滚动高度
$("#top_div").show(); //显示
}else{
$("#top_div").hide(); //隐藏
}
});
$("#top_a").click(function(){
$("html,body").animate({scrollTop: 0}, 500); //500为页面移动速度,单位:毫秒,1000毫秒=1秒
});
});
</script>

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:Javascript  jQuery  返回顶部  滑动  浮动  JS特效  
  • 已有1位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。