When Fix anchor positions is enabled (and it is by default), normal links with fragments don't work correctly. If you click on a link with anchor tag you won't be redirected to a target page but instead scrolled to the element on the same page.

Steps to reproduce

  1. Create two nodes with <div id="test">Dummy</div>.
  2. On node 1 add a link: <a href="/node/2#test">test 2</a>.
  3. On node 2 add a link: <a href="/node/1#test">test 1</a>.
  4. Click test 1 or test 2 to see the result. When clicking on test 1 you should go to the Dummy div on node/1 page but you will stay on the same page.

How to fix

bootstrapAnchor runs for each element with a fragment. It looks like it excludes only external links but does not exclude links to other pages. The validAnchor should be set to true only if hostname AND path matches.

bootstrapAnchor: function (element) {
  element.validAnchor = element.nodeName === 'A' && (location.hostname === element.hostname || !element.hostname) && element.hash.replace(/#/,'').length;
/* ... */
}

Comments

kopeboy’s picture

kopeboy
Primary language Italian
Location Milan
commented
Title: Fix anchor positions prevents anchors with fragments to work correctly » Fix anchor positions prevents anchors to work correctly
Version: 7.x-3.x-dev » 7.x-3.1-beta2
Priority: Major » Critical

WOW, I lost ONE ENTIRE day to try to make simple fu**ing anchors to work on fresh new site and now I realise the problem is Bootstrap theme (used by 33k sites with its default configuration).

I tried everything from normal Menu items, menu items with tokens and other menu extra modules, with Void link module, writing php code in template.php, and finally with custom content panes with <a href="#anchor">Text</a> and <a name="anchor"></a>, and couldn't get anything to work. Seriously, WTF?!

The problem is not only the one described by SiliconMind, the problem is you don't even get scrolled into the same page!

I noticed that right after I clear cache, the anchor links work, but after a page reload they don't.
I also noticed my custom content pane anchor with <a name="anchor"> gets rewritten into <a name="anchor" id="anchor"> ?!?

Disabling "Fix anchor scrolling" make the anchor links work, but of course without smooth scrolling funcionality.

Excuse me for the anger :(

rdeboer’s picture

rdeboer
Location Melbourne
commented

Thanks so much @kopeboy! Saves me from going mad ;-)

You are right. Bootstrap3 theme kills the operation of any <a href="#.....">....</a> buttons/links on the page.

I can confirm @SiliconMind and @kopeboy's findings:
"Disabling Fix anchor scrolling makes the anchor links work, but of course without smooth scrolling functionality."

(Appearance > Settings on Your Bootstrap Theme > Javascript > Anchors)

msti’s picture

msti
Location Heraklion
commented
Version: 7.x-3.1-beta2 » 7.x-3.x-dev

I have the same issue.
Disabling "Fix anchor scrolling" as kopeboy suggested resolves the error.

knalstaaf’s picture

knalstaaf commented

@RdeBoer: here's how you get the smooth scrolling back, without Fix anchor scrolling being enabled: #2396391: Anchors and smooth scrolling in Bootstrap (without obstructing accordion tabs)

(I moved it to another topic since it's not 100% related to the original issue of this thread)

maq.said’s picture

maq.said commented

Thanks. I was also surprised, why the hell the basic anchoring does not seem to work when I set my site working well. Now issue is solved.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (won't fix)

Closing in favor of #2462645: Create @BootstrapPlugin for "bootstrap-anchor".

Marking as "won't fix", because any solution(s) provided here is against the current code. This will be replaced with http://markcarver.github.io/bootstrap-anchor/ instead.

xiangrikuiyy’s picture

xiangrikuiyy commented

That's helpful. Our solution was to change our jquery from 1.10 to 1.8. but kopeby's solution is great and it works.