Question

I have a nav menu bar based on twitter bootstrap that I want to apply scrollspy to for hightlighting. i include the menu into multiple pages using a normal php include. therefore I am linking to files using their filename plus bookmark (e.g. products.php#foo).

but the way that scrollspy wants urls to work is to use the format <a href="#id-of-target">my link</a>, so that when <div id="id-of-target"> scrolls into view, the href is matched based on the href attrib and gets the active class put on it.

which means that if I have a link like <a href="products.php#my-catalogue">my catalogue</a> then it won’t match the id and the link won’t highlight.

i couldn’t work out how to modify scrollspy so that it only matches on the id after the # in the href value.

Answer 1

New Answer

(1) You can add a data-target to your link like so:

<a href="products.php#my-catalogue" data-target="#my-catalogue">my catalogue</a>

(2) Bootstrap uses either your href or data-target in your nav links to find the target regions on the page. If you have something like products.php#my-catalogue the regular expression checker in the code will fail. But if you do a trim beforehand it will work

In scroll spy bootstrap code you can change (in the “refresh” function in ScrollSpy):

.map(function () {
    var $el = $(this)
              , href = $el.data('target') || $el.attr('href')
              , $href = /^#\w/.test(href) && $(href)

to

.map(function () {
    var $el = $(this)
              , href = $el.data('target') || $el.attr('href')
              , trimmed = href.match(/#\w*/)[0]
              , $href = /^#\w/.test(trimmed) && $(trimmed)

and then having something like

<a href="products.php#my-catalogue">my catalogue</a>

should be no problem

---

Old Answer

Maybe you could try editing the scroll spy selector in the bootstrap js code?

There is a line (around 1442 for me):

selector = this.selector
      + '[data-target="' + target + '"],'
      + this.selector + '[href="' + target + '"]'

If changed to

 selector = this.selector
      + '[data-target="' + target + '"],'
      + this.selector + '[href="products.php' + target + '"]'

Could solve your problem