position: absolute;和fixed.两种方法!
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
main.js :
/**
* backToTop1
* 跟随一起滑动,滑哪跟哪
*/
$(document).ready(
function
(){
$(window).scroll(
function
() {
//滚动时触发
var
top = $(document).scrollTop(),
//获取滚动条到顶部的垂直高度
height = $(window).height();
//获得可视浏览器的高度
if
(top > 100){
$(
"#backToTop1"
).show(200,
function
(){
$(
"#backToTop1"
).css({
top: height + top - 80
})
});
}
});
/*点击回到顶部*/
$(
'#backToTop1'
).click(
function
(){
$(
'html, body'
).animate({
scrollTop: 0
}, 500);
});
});
/**
* backToTop2
* 固定的,默认显示,直到回滚到一定距离消失
*/
$(document).ready(
function
(){
$(window).scroll(
function
() {
//滚动时触发
var
top = $(document).scrollTop();
//获取滚动条到顶部的垂直高度
if
(top > 100){
//到一定高度显示
var
height = $(window).height();
//获得可视浏览器的高度
$(
"#backToTop2"
).fadeIn(300).css({
top: height-80
});
}
if
(top < 100){
//小于100消失
$(
"#backToTop2"
).fadeOut(200);
}
});
/*点击回到顶部*/
$(
'#backToTop2'
).click(
function
(){
$(
'html, body'
).animate({
scrollTop: 0
}, 500);
});
});