javascript - 返回顶部链接隐藏在文本下方

Question

我在我的 mvc 元素中显示返回顶部链接。 布局:

<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a>

CSS:

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}

JS:

$(window).scroll(function () {
                if ($(this).scrollTop() > 50) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
            // scroll body to 0px on click
            $('#back-to-top').click(function () {
                $('#back-to-top').tooltip('hide');
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });

            $('#back-to-top').tooltip('show');

此按钮/链接工作正常。但在某些页面上，它隐藏在正文内容/表格下。在某些页面上它显示正确(文本前面)。 我想在所有页面的文本前面显示此链接。 请帮我解决这个问题。

Answer 1

只需为该元素设置 z-index:

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;

    z-index: 9999;
}