经典的 jquery 多端自适应返回顶部按钮
2020-07-15 本文已影响0人
辣辣不乖
依赖Jquery 注意加载顺序
css
#back-top {
position:fixed;
width:60px;
height:60px;
bottom:30px;
right:30px;
background:#ccc;
text-align:center;
line-height:60px;
text-decoration:none;
}
html
<a href="#" id="back-top">Top</a>
js
$(function() {
//先将#back-top隐藏
$('#back-top').hide();
//当滚动条的垂直位置距顶部100像素一下时,跳转链接出现,否则消失
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#back-top').fadeIn(1000);
} else {
$("#back-top").fadeOut(1000);
}
});
//点击跳转链接,滚动条跳到0的位置,页面移动速度是1000
$("#back-top").click(function() {
$('body').animate({
scrollTop: '0'
}, 1000);
return false; //防止默认事件行为
})
})
html 和 css 直接写入到 js
$(function() {
//先将#back-top隐藏
$('#back-top').hide();
//当滚动条的垂直位置距顶部100像素一下时,跳转链接出现,否则消失
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#back-top').fadeIn(1000);
} else {
$("#back-top").fadeOut(1000);
}
});
//html和css直接写入入到js, 注意转义字符`\"`
$("body").append("<div id=\"back-top\" style=\"...\">^</div>");
//点击跳转链接,滚动条跳到0的位置,页面移动速度是1000
$("#back-top").click(function() {
$('body').animate({
scrollTop: '0'
}, 1000);
return false; //防止默认事件行为
})
})