Bootstrap Affix "Вернуться к началу" Ссылка

Хорошо, мне трудно понять компонент Bootstrap Affix. Моя цель состоит в том, чтобы в нижней левой части экрана (на полях) появилась ссылка "Вверх", если/когда страница прокручивается ниже верхней части содержимого. На моей странице есть NavBar, прикрепленный к вершине и контейнер для тела. Ниже приведена общая идея, где я нахожусь, но я также установил JS Fiddle, который демонстрирует мою установку. Я также не профессионал в позиционировании, так что это тоже часть моей проблемы.

<div class="navbar navbar-fixed-top">...</div>
<div class="content-container" id="top">
    <p>Content that is longer than the viewport..</p>
    <span id="top-link" data-spy="affix">
        <a href="#top" class="well well-sm">Back to Top</a>
    </span>
</div>

<style>
    .navbar-fixed-top + .content-container {
        margin-top: 70px;
    }
    .content-container {
        margin: 0 125px;
    }
    #top-link.affix {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
</style>

Ответы

Ответ 1

Теперь, когда я лучше понимаю компонент Affix, я придумал решение. После указания верхнего смещения и настройки CSS он работает хорошо. Ссылка будет прокручиваться в представлении, а затем "прикрепить" к нижней. Для страниц, на которых нет полосы прокрутки, ссылка никогда не включена. Я обновил JS Fiddle (здесь) с помощью рабочего примера. Ключами являются:

HTML:

<!-- child of the body tag -->
<span id="top-link-block" class="hidden">
    <a href="#top" class="well well-sm" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
        <i class="glyphicon glyphicon-chevron-up"></i> Back to Top
    </a>
</span><!-- /top-link-block -->

JS:

<script>
// Only enable if the document has a long scroll bar
// Note the window height + offset
if ( ($(window).height() + 100) < $(document).height() ) {
    $('#top-link-block').removeClass('hidden').affix({
        // how far to scroll down before link "slides" into view
        offset: {top:100}
    });
}
</script>

CSS

<style>
#top-link-block.affix-top {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -82px;
    left: 10px;
}
#top-link-block.affix {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 18px;
    left: 10px;
}
</style>

Примечание: Я не смог использовать аффикс нижнего смещения (пример), чтобы скрыть ссылку для коротких страниц из-за ошибки с расчетом высоты контейнерного контейнера (Bootstrap Issue # 4647). Я уверен, что есть обходное решение и приветствую решение этого метода.

Ответ 2

спасибо за верхнюю кнопку, тоже полезный для меня:) одним из незначительных улучшений было бы избежать использования onclick="" в теге <a>, но вместо этого с помощью регистратора событий jQuery's:

HTML:

...
<a href="#top" id ="backToTopBtn" class="well well-sm">
...

JS:

 $('#backToTopBtn').click(function(){
        $('html,body').animate({scrollTop:0},'slow');return false;
    });