当前位置:K88软件开发文章中心编程语言JavaScriptJS01 → 文章内容

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

减小字体 增大字体 作者:wangsdong     来源:asp编程网  发布时间:2018-12-30 8:58:46

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动画