网页一键返回顶部。
样式如上。
第一步:写一个button按钮。
<button type="button" id="back_top" class="back_top" >
<span class="glyphicon glyphicon-menu-up"></span>
</button>
id和class名字都是可以自己取的,写js时填对就可以。
span 标签加的是按钮的形状图,可以在Bootstrap上选择自己喜欢的,或者自己本地绘制。
第二步:script
<script>
$(function () {
$('#back_top').click(function () {
$('html,body').animate({scrollTop: 0}, 150);
});
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
$('#back_top').fadeIn(150);
} else {
$('#back_top').stop().fadeOut(150);
}
});scroll();
})
</script>
中间坐标可以根据实际情况进行更改。
第三步:css
调整到合适的位置。
<style>
.back_top {
position: fixed;
right: 15em;
bottom: 100px;
width: 3.5rem;
height: 3.5rem;
padding: 0;
margin: 0;
border: 0;
border-radius: 33%;
display: none;
}
.back_top:focus {
outline: none;
}
</style>