Question

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

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

HTML：

<footer class="site-footer">
  <a href="#" style="text-align:inherit; position: relative;
     vertical-align: inherit; left: 399px; width: 146px;"
     data-scroll="claims">TOP OF THE PAGE</a>
</footer>

CSS：

.site-footer, .page-wrap:after 
{
  height: 52px; 
}
.site-footer 
{ 
  background: orange;
  border:2px solid white;
}

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

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

我曾尝试过使用CSS属性位置，但无济于事。有人可以帮忙吗？

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

感谢。

Answer 1

使用固定定位：

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

position: fixed表示该元素将从普通文档流中删除，并相对于视口（浏览器窗口）定位。

上面的代码会强制您的.site-footer元素始终显示在屏幕的左下角（如果您想在右侧使用right: 0，请使用{{1}}）。可能需要一些额外的代码，但不可能从您提供的内容中得知这些代码。

Answer 2

查看Smooth Page Scroll to Top with jQuery以获取此类效果的示例。

这是demo。

以下是代码：

CSS：

.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;
}

HTML：

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

的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>

我的网页上的页脚类

2 个答案: