Anchor JS errors: "Cannot read property 'top' of null" and "Cannot call method 'createDocumentFragment' of null"

Hey,

bootstrap.js seems to think that every <a> might be an anchor. Lines 113 or there abouts:

  var anchors = $(context).find('a').toArray();
  for (i = 0; i < anchors.length; i++) {
    if (!anchors[i].scrollTo) {
      this.bootstrapAnchor(anchors[i]);
    }
}

For one page with admin menu on it, this processed 591 links, adding scrolly stuff to each one (I think anyway).

Changed code to this:

      var anchors = $(context).find('a').toArray();
      for (i = 0; i < anchors.length; i++) {
        var anchHref = $(anchors[i]).attr("href");
        if ( anchHref ) {
          if ( anchHref.length > 1 && anchHref.charAt(0) === "#") {
            if (!anchors[i].scrollTo) {
                this.bootstrapAnchor(anchors[i]);
            }
          }
        }
      }
      $scrollableElement.once('bootstrap-anchors', function () {
        $scrollableElement.on('click.bootstrap-anchors', 'a[href*="#"]:not([data-toggle],[data-target])', function(e) {
          var attrHref = this.attributes["href"];
          if ( attrHref ) {
            if ( attrHref.length > 1 && attrHref.charAt(0) === "#") {
              this.scrollTo(e);
            }
          }
        });
      });
    },

The code only process links that have # as the href. It seems to work.

However, I'm no JS guru. No doubt some other human could do better.

Kieran

I ran into something similar, I fixed it as follows

it seems that you miss the #1, my site couldn't work without #1

Thanks for working on this @attiks. Unfortunately it's a little more complicated than just returning early. We need to also check to see if there's any elements that use the name attributes instead of it's ID (think form elements :)).

I've also gone ahead and fixed another issue while I was in there. The $fakeElement was trying to attach itself to the document, it should be prepended to BODY instead.

Committed 46ecffc to 7.x-3.x:

Issue #2162165 by Mark Carver, attiks | aukhan: Anchor JS errors: "Cannot read property 'top' of null" and "Cannot call method 'createDocumentFragment' of null".

I was getting these errors with the close buttons on the drupal messages, fixed it by disabling the Anchor settings in the theme settings under Javascript > Anchors.

I'm just moving this back to 7.x. If this needs re-evaluation in 8.x, create a new issue.

For me the attached patch worked.

yes this worked for me, thank you!

this patch worked for me, although the anchors are slightly cut off at the top of my window, as opposed to them being perfect when i disable the "Fix anchor" setting. for this reason i applied the patch but am not actually using it since the result is better without it.

#11 works like a charm, it would be great if this could be merged back into 7.x-3.0 as the functionality is definitely broken

#11 solved problems

FWIW, this anchor crap (which I can say, cause I originally created it) is finally getting replaced with a proper plugin :)

#11 works for me

#11 isn't going to get committed

Wow... dudes.. Working Perfect. Apply both patches :D

#6 worked for me

I needed #1 and #6.

I applied #6 first, then the standard HTML anchor "name" attribute started to work. Before that, this standard HTML code did not work:

<a href="#jumphere">Click here to jump</a>
...
...
<a name="jumphere">Destination</a>

However, #6 fix broke the control arrows on Bootstrap carousel. The arrows stopped advancing the carousel slideshow.
I had to apply #1 to fix the problem.

In the end, #1 and #6 were enough to solve my problem.

The patch in #11 didn't apply for me, but applying it manually solved my JS error.

#6 with #11 works for me.
Thanks.

We also had some trouble with the implementation of that particular javascript file in Bootstrap 3.0. It also affected our Bootstrap carousels and our "to top" links, as these also work with anchor links.

Here is a patch which also considers that.

I'm closing comments on this issue. Nothing else is going to be committed on this issue per #16.