- ·上一篇文章:JS刷新当前页面的几种方法
- ·下一篇文章:jquery获取checkbox表单值的最简单的方法
jquery动态按需加载返回顶部,结合简单jQuery动画
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.K88.NET/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>
jquery动态按需加载返回顶部,结合简单jQuery动画