In my project I noticed that if Fix anchor scrolling is enabled (Appearance > Settings on Your Bootstrap Theme > Javascript > Anchors), anchors used throughout the content wouldn't work anymore. When this is disabled the anchors work again, but they won't scroll smoothly to their destination.

To fix this you can add this script:

jQuery.noConflict();
jQuery(function() {
    jQuery('#a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = jQuery(this.hash);
            target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                jQuery('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Notice: this may conflict with Bootstrap's accordion functionality.

To avoid this, you can specify the class ("smooth") of the element(s) that should trigger a smooth scrolling animation, by replacing the third line with the following:

jQuery('a[href*=#][class*="smooth"]:not([href=#])').click(function() {

Or, vice versa, specify the class ("accordion-toggle") of the element(s) that shouldn't trigger the script (in this case we exclude the class of the links that trigger the accordion effect):

jQuery('a[href*=#]:not([class*="accordion-toggle"],[class*="contextual-links-trigger"])').click(function() {

I'm just posting this in case anyone else runs into it.

CommentFileSizeAuthor
#9 bootstrap-anchor-fix-2396391-9.patch841 bytesPaulDinelle
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Status: Closed (fixed) » 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://bootstrap-anchor.com/ instead.

knalstaaf’s picture

knalstaaf CreditAttribution: knalstaaf commented
Issue summary: View changes
visualsbysina’s picture

visualsbysina CreditAttribution: visualsbysina commented

this worked for me with jquery 1.9

joshuautley’s picture

joshuautley CreditAttribution: joshuautley commented

Re: update with script and explanation. Thanks. We have all sorts of oddness with anchors on our site too. I'll evaluate and see if this addresses any outstanding issues.

knalstaaf’s picture

knalstaaf CreditAttribution: knalstaaf commented

@joshuautley: does this script solve it for you (it allows to specify multiple classes)?

jQuery(function() {
    jQuery('.smooth, .scrollme').click(function() { // replace class(es) of links that should provoke a smooth scroll
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = jQuery(this.hash);
            target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                jQuery('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000); // speed
                return false;
            }
        }
    });
});

(Source + Codepen)

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented

Or y'all can help with getting the dedicated plugin mentioned in #1 out the door...

joshuautley’s picture

joshuautley CreditAttribution: joshuautley commented

Will do Mark. I'm following your lead.

Thank you knalstaaf for offering a solution but ultimately Mark is looking out for all of us so that is the recommended direction. We want all this stuff to work in the future too and the more duct tape we add the harder the original issue is to fix.

joshuautley’s picture

joshuautley CreditAttribution: joshuautley commented

Because I have a fixed navigation I gave the solution at the site below a try and it worked for my immediate needs.

Note that I specified which page along with where in the page I wanted to apply this CSS because I didn't want it on every H2 tag just for a particular area. This is only temporary until I get a global solution working like what you are working on.

https://css-tricks.com/hash-tag-links-padding/

I'm just putting this out there in case someone has an immediate need.

PaulDinelle’s picture

PaulDinelle CreditAttribution: PaulDinelle at Fenix Solutions Inc commented
FileSize
bootstrap-anchor-fix-2396391-9.patch841 bytes

Since the bootstrap-anchor plugin fix in #1 was pushed back to D8, I made a small patch for this as I don't have time to add and test the bootstrap-anchor plugin. I didn't test all use-cases, just the following:
- Anchors for links on same page (working)
- Anchors for links on other page links (working - goes to new page instead of trying to scroll on current page)
- Accordions (working - making sure they were not affected)

Not the best solution but it was a minimal amount of code and I pulled it from the bootstrap-anchor github project, so I assume it's been fairly well tested. :)