Scrollspy с использованием полного URL

Я пытаюсь заставить scrollspy работать при использовании абсолютного url, а не ссылки # anchor.

например, я могу легко запустить scrollspy, используя только <a href="#section1"></a>

Я хотел бы иметь возможность запускать scrollspy с помощью <a href="http://myurl.com/#section1"></a>

причиной этого является основная навигация на главной странице scorllspy, но блог не является частью главной страницы. При посещении блога, а затем нажав ссылку на что-то на главной странице, вы попадаете в http://myurl.com/blog/#section1 вместо идентификатора домашней страницы.

я нашел это решение ( используйте url и хэш с bootstrap scrollspy), но не смог заставить его полностью функционировать. После некоторой настройки и множества комбинаций регулярных выражений я мог бы заставить его добавить активный класс в первый пункт меню, но он не обновлялся.

есть мысли о том, чтобы заставить это работать? Есть ли альтернативная библиотека js, которую я должен использовать?

решение спасибо Трой!--6--> 

jQuery(function($){
  // local url of page (minus any hash, but including any potential query string)
  var url = location.href.replace(/#.*/,'');

  // Find all anchors
  $('.nav-main').find('a[href]').each(function(i,a){
    var $a = $(a);
    var href = $a.attr('href');

    // check is anchor href starts with page's URI
    if (href.indexOf(url+'#') == 0) {
      // remove URI from href
      href = href.replace(url,'');
      // update anchors HREF with new one
      $a.attr('href',href);
    }

    // Now refresh scrollspy
    $('[data-spy="scroll"]').each(function (i,spy) {
      var $spy = $(this).scrollspy('refresh')
    })
  });

  $('body').scrollspy({ target: '.nav-main', offset: 155 })

});

добавил $('body').scrollspy({ target: '.nav-main', offset: 155 }) чтобы получить смещение данных для повторного применения после обновления scrollspy. После некоторых проб и ошибок, это единственное решение, которое я смог найти.

8
href scrollspy twitter-bootstrap

3 ответов

путь scrollspy закодирован, он смотрит на якоря, которые имеют hrefэто начинается с #.

есть один способ сделать это. Не красиво, но может сработать.

после загрузки страницы в вашей функции jQuery ready выполните поиск в документе всех якорей (внутри целевого контейнера или тела) и проверьте, есть ли href начинается с вашего имени хоста, а затем/#, и если он соответствует менять якорь href просто часть после #

вот некоторый грубый код (не проверенный), который вы могли бы попробовать (скажем, ваша цель scrollspy-div с идентификатором #navbar:

jQuery(function($){
  // local url of page (minus any hash, but including any potential query string)
  var url = location.href.replace(/#.*/,'');

  // Find all anchors
  $('#navbar').find('a[href]').each(function(i,a){
    var $a = $(a);
    var href = $a.attr('href');

    // check is anchor href starts with page's URI
    if (href.indexOf(url+'#') == 0) {
      // remove URI from href
      href = href.replace(url,'');
      // update anchors HREF with new one
      $a.attr('href',href);
    }

    // Now refresh scrollspy
    $('[data-spy="scroll"]').each(function (i,spy) {
       $(spy).scrollspy('refresh');
    });
  });

});

теперь убедитесь, что вы запустите этот после загрузить .

если вы инициализируете свой ScrollSpy через javascript, а не через атрибуты data -*, то замените три строки кода, где scrollspy обновляется с кодом для инициализации вашего scrollspy цель & настройки.

4

или вы можете добавить data-target атрибут элемента ссылке: data-target="#link"

<a href="http://www.site.ru/#link1" data-target="#link1">Link1</a>
<a href="http://www.site.ru/#link2" data-target="#link2">Link2</a>
27

Я надеюсь, что это поможет всем, кто сталкивается с той же ситуацией,что и я.

просмотр в прямом эфире:Live Sample (Handyman сайт построен на WordPress, корни.io и Bootstrap 3)

вы можете видеть ниже, что я условно выполняю это только тогда, когда не на главной странице. Это оставляет поведение scroll spy нетронутым на главной странице и изменяет ссылки на ссылки на соответствующие разделы на главной странице при нажатии со страниц, отличных от главной страницы.

этот это то, что я придумал (довольно хорошо протестировано)

вам просто нужно будет заменить селекторы jQuery/css по мере необходимости.

вот полный фрагмент, который использует scroll spy, вышеупомянутое решение и немного плавного действия прокрутки раздела

/**
 * Scroll Spy via Bootstrap
 */
$('body').scrollspy({target: "#nav_wrapper", offset:50});

/**
 * Scroll Spy meet WordPress menu.
 */
// Only fire when not on the homepage
if (window.location.pathname !== "/") {
    // Selector for top nav a elements
    $('#top_main_nav a').each( function() {
        if (this.hash.indexOf('#') === 0) {
            // Alert this to an absolute link (pointing to the correct section on the hompage)
            this.href = "/" + this.hash;
        }
    });
}

/**
 * Initiate Awesome Smooth Scrolling based on a.href
 */
$('a.smooth-scroll, #top_main_nav a').click( function() {
    target = $(this).attr('href');
    offset = $(target).offset();
    $('body,html').animate({ scrollTop : offset.top }, 700);
    event.preventDefault();
});

посмотреть его жить здесь

0