Django搭建个人博客：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

本章集中介绍四个重要的小功能：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏。

这几个功能与Django基本没啥关系，更多的是前端知识，但是对博客网站都很重要，问的读者也比较多，因此也集中讲一下好了。

回到顶部浮动按钮

当用户拜读完你的博文后，可能想回到文章开头重新阅读，或者审视其中的某些内容。如果文章内容较多，不停滑动滚轮回页面顶部未免有点太让人烦躁了。

一种解决办法是增加一个回到顶部的浮动按钮。当页面向下滚动到某个位置后，按钮就呈现在页面右下角；点击按钮，页面就回到顶部。这个功能 Bootstrap 4 似乎没有提供，但也不复杂，就自己用 JavaScript 和 CSS 写吧。

在templates目录新建back_to_top_func.html文件，写入以下代码：

templates/back_to_top_func.html

<!-- 参考了 鹦鹉 的代码，在此致谢 -->
<!-- https://ezbox.idv.tw/131/back-to-top-button-without-images -->

<button type="button" id="BackTop" class="toTop-arrow" style="z-index: 100;"></button>

<script>
    // 向上滚动的函数
    $(function () {
    
        $('#BackTop').click(function () {
    
            $('html,body').animate({
    scrollTop: 0}, 500);
        });
        $(window).scroll(function () {
    
            if ($(this).scrollTop() > 300) {
    
                $('#BackTop').fadeIn(300);
            } else {
    
                $('#BackTop').stop().fadeOut(300);
            }
        }).scroll();
    });
</script>

<style>
    /* 按钮边框的大小、位置、样式 */
    .toTop-arrow {
    
        width: 3.5rem;
        height