0

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

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

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 属性位置，但无济于事。任何人都可以帮忙吗？

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

谢谢。

4

2 回答 2

1

使用固定定位：

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

position: fixed表示该元素将从正常的文档流中移除并相对于视口（浏览器窗口）定位。

上面的代码将强制您的.site-footer元素始终在屏幕的左下方可见（right: 0如果您希望它在右侧，请使用它）。可能需要一些额外的代码，但无法从您提供的内容中看出这一点。

于 2013-11-11T19:27:41.807 回答
1

查看使用 jQuery 平滑页面滚动到顶部以获取此类效果的示例。

这是一个演示。

这是代码：

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>
于 2013-11-11T19:38:58.453 回答