Bootstrap: HTML-якоря не работают из кнопки / нижнего колонтитула - PullRequest
Новая
       8

Bootstrap: HTML-якоря не работают из кнопки / нижнего колонтитула

0 голосов
/ 11 мая 2018

У меня проблемы с получением ссылок привязки (#) для работы из определенных разделов моей страницы, созданных на основе темы CSS Boostrap.

Похоже, что Plugins.js из Bootstrap разрывает якорные ссылки при доступе изнутри кнопки.

В приведенном ниже примере кнопка SEE MORE не будет ничего делать при нажатии (ее цвет меняется только на отключенный цвет), но работает, если используется щелчок правой кнопкой мыши и открытие с помощью. Та же самая якорная ссылка, которая используется в другом месте на странице, работает как положено. 

<div class="single_tab_content">
   <div class="head_title">
       <h4>TITLE</h4>
          <div class="separator2"></div>
   </div>
   <p>Some sample text</p>
    <a href="#portfolio" class="btn btn-primary">SEE MORE</a>
</div>

Сам файл plugins.js слишком длинный для вставки, но это стандартный, неотредактированный файл, используемый в темах начальной загрузки.

Кто-нибудь знает обходной путь, чтобы заставить это работать?

1 Ответ

0 голосов
/ 11 мая 2018

В вашем файле main.js есть этот код enter image description here

Просто добавьте класс .footer_widget после класса .navbar-collapse, тогда все будет работать нормально 

 $('.navbar-collapse, .footer_widget').find('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 40)
                }, 1000);
                if ($('.navbar-toggle').css('display') != 'none') {
                    $(this).parents('.container').find(".navbar-toggle").trigger("click");
                }
                return false;
            }
        }
    });
...