css - 我网页上的页脚类

Question

我有一个网络应用程序，在一个页面上显示多个 Canvas 。这使得页面很长，客户端需要进行大量滚动。

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

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

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

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

我试过调整 CSS 属性位置，但无济于事。谁能帮忙？

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

谢谢。

Answer 1

查看 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>