(1)base.html
<div id="back-to-top">
<i class="glyphicon glyphicon-arrow-up"></i>
</div>
(2)css代码
base.html引用
<link href="{% static 'blog/css/back-to-top.css' %}" rel="stylesheet">
blog/css/back-top-css.css代码
#back-to-top {
box-shadow: 5px 5px 5px #888888;
border-radius: 2px;
position: fixed;
bottom: 70px;
right: 70px;
color: whitesmoke;
background: #3ac57d;
width: 50px;
height: 50px;
text-align: center;
}
#back-to-top i {
font-size: 30px;
margin: 10px auto;
}
(3)js代码
base.html
<script>
$("#back-to-top").click(function () {
window.scrollTo(0,0);
});
</script>