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 (){
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