HTML代码：
|
1
2
3
4
5
6
7
8
9
|
<
div
class
=
"main"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate voluptates!
</
div
>
//负责容纳各种按钮，例如“回到页面顶部”，“扫面二维码”等等
<
div
class
=
"backContainer"
>
<
a
href
=
"#"
id
=
"backTop"
></
a
>
</
div
>
|
CSS代码：
|
1
2
3
4
5
6
|
*{
margin
:
0
;
padding
:
0
;}
a{
color
:
#000
;
text-decoration
:
none
;}
.main{
width
:
100%
;
height
:
1500px
;}
.backContainer{
position
:
fixed
;
right
:
40px
;
bottom
:
40px
;}
#bac
kTop{
display
:
block
;
width
:
46px
;
height
:
46px
;
background
:
url
(
'images/go-top.png'
)
no-repeat
0
-100px
;}
#bac
kTop:hover{background-position-y:
-150px
;}
|
“回到顶部”按钮及鼠标移入时效果截图：
JS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(
'.backContainer'
).hide();
$(window).scroll(
function
(){
//当窗口相对于滚动条顶部的偏移大于150px时，显示跳转按钮，否则不显示
if
($(window).scrollTop() > 150){
$(
'.backContainer'
).fadeIn(
'slow'
);
}
else
{
$(
'.backContainer'
).fadeOut(
'slow'
);
}
});
//当点击跳转按钮时
$(
'#backTop'
).click(
function
(){
$(
'html'
).animate({
scrollTop:0
},1000);
})
|
scroll([[data],fn]):
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
$(window).scroll( function() { /* ...do something... */ } );
animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数。 这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
scrollTop([val])
获取匹配元素相对滚动条顶部的偏移, 此方法对可见和隐藏元素均有效。
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1872718
