прямая ссылка вверх

Я показываю back to top ссылку в моем проекте 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');

Эта кнопка / ссылка работает правильно. но на некоторых страницах он скрывается под содержимым / таблицей тела. на некоторых страницах он отображается правильно (infront of text). Я хочу показать эту ссылку перед текстом на всех страницах. Пожалуйста, помогите мне решить эту проблему.

javascript,css,

0