Step 1.修改 footer
app/views/common/_footer.html.erb
<a href="#myPage" >
<span id="gotop">回到<br/>顶部></span>
</a>
Step 2. 添加样式
app/assets/stylesheets/application.scss
//回到顶部
#gotop {
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
background-color: rgb(25,187,49);//
color: #ffffff;
border-radius: 50%;
padding: 5px 9px;
cursor: pointer;
display: none; /*默认先隐藏掉*/
}
Step 3. 添加JS
app/assets/javascripts/application.js
//顶部回到
$(document).on('click', '#gotop', function () {
$('body').animate({'scrollTop': 0}, 500) //在500ms的时间内，慢慢地回到顶部
})
$(window).scroll(function () {
if ($(this).scrollTop() > 560) {
$('#gotop').fadeIn() // 当页面向下滚动的距离大于500px时，慢慢地显示「回到顶部按钮」
} else {
$('#gotop').fadeOut() // 否则慢慢地隐藏「回到顶部按钮」
}
})
大功告成！！
