BS | 在博客下角添加“Back to Top”按钮

是普通方形类型的哦。

 模板→修改HTML
 把框内的代码(A)复制在随便一个“}”的下面。

.back-to-top { display:none; position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #FFC6C6; background-color: white; font-size: 12px; padding: 1em; } .back-to-top:hover { background-color: FFE7E7(135, 135, 135, 0.50); text-decoration:none; color:#999; }
(A)

然后再复制以下框内代码(B)到

</html>

的上面。

<a href="#" class="back-to-top">TOP</a> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>
(B)

 完成。 

 解 释  

当页面在离开最顶的情况下，右下角就会出现滚回上方的Short-cut按钮。

代码(A)是“Back to top”的外观设置。

.back-to-top(整体显示的外观) {

 position: fixed;(固定在右下角不会随着画面滚动)

    bottom: 2em;(离下边的距离)

    right: 0px;(离右边的距离)

    color: #FFC6C6;(字体颜色)

    background-color: white;(背景颜色)

    font-size: 12px;(字体大小)

    padding: 1em;(字体与边缘的距离)

}

.back-to-top:hover(鼠标触碰到后的外观){  

    background-color: FFE7E7(135, 135, 135, 0.50);

    color:#999;

}

代码(B)

<a href="#" class="back-to-top">TOP</a>
<script>

“TOP”可更改其他文字。