当前位置:asp编程网>技术教程>Javascript教程>  正文

jquery动态按需加载返回顶部,结合简单jQuery动画

2015-05-13 14:28:44   来源:www.aspbc.com    作者:wangsdong   浏览量:2122   收藏

jquery动态按需加载返回顶部,css侧边屏幕绝对定位,结合简单jQuery动画实现更好体验

<style>
body{ height:3000px; }
a#top1{ background:transparent url(top.gif) center no-repeat; width:62px; height:62px; position:fixed; right:90px; top:500px; display: none; }
a#top1.a1{ <style>
body{ height:3000px; }
a#top1{ background:transparent url(top.gif) center no-repeat; width:62px; height:62px; position:fixed; right:90px; top:500px; display: none; }
a#top1.a1{ background-position: -50px 0;}
a#top1.a2{ background-position: -112px 0; }
</style>background-position: -50px 0;}
a#top1.a2{ background-position: -112px 0; }
</style>

<script type="text/javascript" src="http://www.aspbc.com/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#top1").mouseenter(function(){
$(this).removeClass("a1").addClass("a2");
}).mouseleave(function(){
$(this).removeClass("a2").addClass("a1");
});

min_height = 100;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function(){
//获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐
if( s > min_height){
$("#top1").fadeIn(100);
}else{
$("#top1").fadeOut(200);
}
});
});
</script>
<a href="#" class="a1" id="top1"></a>



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网