Css 我的网页上的页脚类

我有一个web应用程序，在一个页面上显示多个画布。这使得页面非常长，需要从客户端进行大量滚动

为了增强用户的可访问性，我添加了一个页脚类：

HTML:

这允许用户在滚动到页面底部后直接跳到页面顶部

我想知道是否有办法让这个页脚在页面的所有视图中都可用，而不仅仅是在最底部。这样，客户机可以选择只从页面中间滚动到页面顶部，而不是从页面底部滚动

我尝试过摆弄CSS属性的位置，但没有用。有人能帮忙吗

另外，关于如何让我的用户体验更酷的进一步建议也非常感谢

---

谢谢

使用固定定位：

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
}

position:fixed

表示元素将从正常文档流中删除，并相对于视口（浏览器窗口）进行定位

上面的代码将强制您的

.site footer

元素始终显示在屏幕的左下角（如果您希望它位于右侧，请使用

right:0

）。可能需要一些额外的代码，但无法从您提供的代码中分辨出来。

查看此类效果的示例

这是一本书

以下是代码：

CSS:

HTML:

...
这里有一堆内容，大到足以让页面滚动，以便阅读所有内容。
...

JavaScript/jQuery：

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } 
            else {
                $('.scrollup').fadeOut();
            }
        }); 

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）{
$（'.scrollup'）.fadeIn（）；
} 
否则{
$（'.scrollup'）.fadeOut（）；
}
}); 
$（'.scrollup'）。单击（函数（）{
$（“html，body”）.animate（{scrollTop:0}，600）；
返回false；
});
});

Add

right:0除
左外：0.site footer
类进行编码>，使其跨越浏览器的整个宽度。此外，正如厌倦提到的，
位置：固定
将使页脚脱离文档流，因此您需要补偿该偏移量，以便您的内容不会隐藏在页脚后面。在我的示例中，我刚刚添加了
marginbottom:52px
到
主体
元素，以匹配页脚高度。这并不是最好的处理方法，但是如果你知道你的页脚总是那么高，那就足够了。我不希望页脚跨过浏览器的整个宽度。只是一个小小的中间页脚是我要找的。
.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}

<a href="#" class="scrollup">Scroll</a>
...
Bunch of content here, big enough to make the page scroll in order to read it all.
...

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } 
            else {
                $('.scrollup').fadeOut();
            }
        }); 

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });
    });
</script>