ScrollToPosition function not working on TOC links on some pages

[Alex Yasurek]

HI,

I based my theme off the Scroll Web Help theme so we use the ScrollToPosition function that was in the theme.main.js file. This function adds an offset when linking to anchors to make up for the header, this way when you click on the link the anchor is not covered by the header.

The problem I am running into is that its not working with some links inside the TOC macro. It does on some pages and not others. I added a log output to the function and that doesnt even output anything on these pages where the TOC links dont use the function. The TOC links still jump me to the appropriate heading but the heading ends up being covered by the header at the top of the page instead of being offset by the function. 

Links to anchor macros seem to work fine. I am really just running into an issue with links inside the TOC macro. Any idea what it may be?

TOC works on this page : https://testlearn.mdsol.com/BALANCEprd/en/about-roles-and-permissions-in-balance-53355778.html

TOC doesn't work: https://testlearn.mdsol.com/BALANCEprd/en/about-the-workflow-in-balance-53355777.html

This is the ScrollToPosition function that came in the theme:

    function scrollToPosition() {

        var duration = 100;

        var additionalOffset = 10;

        var headerHeight = $('#ht-headerbar').height();

      

        if (window.location.hash) {

            // Net to put it at the end of the event loop for making it work in IE :-(

            setTimeout(function() {

                $(window).scrollTo(window.location.hash, {offset: -(headerHeight + additionalOffset), duration: duration, interrupt: true});

            }, 0);

        }

        $('a[href^="#"]').click(function (e) {

            e.preventDefault();

            $(window).stop(true).scrollTo(this.hash, {

                'offset': -(headerHeight + additionalOffset),

                'duration': duration,

                'interrupt': true

            });

             console.log(this.href);

            if (history) {

                history.pushState({}, '', $(e.target).attr('href'));

            }

            return false;

        });

    }

[Jens Rutschmann (K15t Software)]

Hi Alex,

I bet you are affected by this isue: https://k15t.jira.com/browse/EXP-1083
While this is filed for our exporters, the actual bug was in the Scroll
WebHelp Theme.

We fixed it by passing the scroll target as a DOM element to the jQuery
scrollTo plugin, instead of a string.

Have a look at the fixed function here (line 167):

https://bitbucket.org/K15t/scroll-webhelp-theme/src/cf32abba1beda8baee389f2d2966c46bf5a1f3a7/src/main/resources/com/k15t/scroll/scroll-webhelp-theme/shared/assets/js/theme.main.js?at=master&fileviewer=file-view-default#theme.main.js-159


Hope that helps.


Cheers,
Jens

[Alex Yasurek]

Hi,

Unfortunately I am still running into the same issue after updating the function with the fixed one you posted.  The links in the TOC work but they are not being offset by function so the heading it is jumping to is still being covered by the header. Regular anchors still work fine and get offset, it's just the links in the TOC macro that don't on most pages. I can only find a few pages where the links in the TOC actually get offset when it jumps to its corresponding heading. Most pages don't work.

Also, these page don't have special characters in the title or anything like that. You can take a look at the two link examples I post before. The titles of pages in the space don't use special characters. These are all target spaces also that were published to from source spaces.

Thanks

[Alex Yasurek]

HI,

One thing I did that seemed to have fixed the issue is set a timeout function to run the function after a second. Not sure why but this seems to have fixed the issue because I realized the problem was that scrollToPosition function would not run sometimes on a page. This is why the jumps to anchors were not working correctly. BY adding this timeout function, it seems to now run after the page is fully loaded. No idea why but this seems to be working for right now

setTimeout(function () { scrollToPosition(); }, 1000);  

[Jens Rutschmann (K15t Software)]

Hi Alex,

thanks for letting us know about that.

Are you using Confluence 5.8 or later? Atlassian introduced a
client-side rendering mode for the TOC macro in 5.8 and I suspect that's
causing the issue for you.

The current implementation of the scrollToPosition function uses
jQuery's click() method to add handlers to all existing anchor links.
I suppose the client-side toc macro simply did not create the links when
the scrollToPosition is executed.

Try to change:
$('a[href^="#"]:not(.tabs-menu *)').click(function (e) { ...
to
$('a[href^="#"]:not(.tabs-menu *)').on('click', function (e) { ...
in the scrollToPosition function.
This will make sure the handler will be attached to links added later on
as well.

You might want to reconsider the setTimeout wrapper because I believe
that will break incoming links having an anchor (when coming from
outside of the current page). The setTimeout call should no longer be
required once you use .on().


Does this work for you?


Cheers,
Jens

[Alex Yasurek]

Hi,

I changed it to the "on" like you mentioned but it then returned to not working on some pages again. 

The issue is definitely that the function is not adding the handlers to the links in the TOC. 

I added a log output to the function and there is no output whenever I click on a TOC link on some pages. I am not sure why it works on some pages but not others. Sometimes it will work on the same page that previously wasnt working when I reload the page, but then if I reload it a third time it stops working again.

I even tried adding the function to my own JS file thats get loaded after the theme.main.js file but then I get errors saying ScrollTo is not a function.

[Maximilian Hilbert (K15t Software)]

Hi Alex,

I've tried the TOC links on the second page to which you linked and they seem to work as expected. Have you resolved your issue?

Best regards,

Maximilian

[Alex Yasurek]

Hi,

Yes I had to leave in the timeout function with 1ms delay to make it work. I added the updated code but that didn't fix the issue on its own. I need that 1ms delay so that it picks up the links from the TOC and adds the handlers to it.

If I remove the timeout function, it only works sometimes on some pages. It can work fine on a page, I reload the page and it doesnt work now and vice versa.

Thanks

[Maximilian Hilbert (K15t Software)]

Hi Alex,

I've taken another look at this problem. You have to use a delegating event to make the handler work even with elements that are added later. That means you add an event handler to an element that contains or will contain any instance of a link that should trigger the handler, and you provide a selector as the second argument of 'on' that filters the events that bubble up.

Example:

$('.ht-content').on('click', 'a[href^="#"]:not(.tabs-menu *)', function(e) {
    ...
});

With this code, all anchor links inside the element with the class 'ht-content', even if they are added later, will trigger the handler (minus those inside '.tabs-menu', of course).

I hope that solves your problem.

Best regards,

Maximilian

[Alex Yasurek]

Hi,

Yes that seems to have fixed the issue. I added that change to the code and removed the timeout function and it seems to be working fine now. It's attaching the handlers to the toc links even if they load in a little bit after the page. It even fixed another issue I was having problems with. If links in the TOC had a "?" in it, the link would not work. I was getting errors pointing to line 2 in the jquery.min file. Seems to have been some kind of regex issue but now it works fine also.

Thanks a lot.

[Amit Kapoor]

Hi,

I too am using custom theme built on Scroll Web Help theme. Now, the anchor links are causing the same issue. Same is true for the TOC links. What do I need to do to fix this issue? I am not very clear about the solution discussed above and the steps involved in using it. Please help.

-Amit

[Amit Kapoor]

I am referring to anchors created automatically by Confluence and the ones created manually using the anchor macro. Both of them are causing the same issue.

[Steffen Burzlaff (K15t)]

Hi Amit,

can you provide an example page where this happens? Does this happen to you default Scroll Web Help Theme too?
I couldn't reproduce the issue with the default Scroll Web Help Theme.

Thanks and have a nice day.

Best Regards,

Steffen

[Amit Kapoor]

Hi Steffen,

Interestingly, it doesn't happen in the default theme. I haven't modified the .js files. But I yes, I did modify the .css and .vm files. The following CSS snippet helped me fix the .confluence-anchor-link anchors but only where it is in p tag. If it is by mistake added in any other tag like h1,h2,h3,h4,h5,h6, etc, this fix doesn't work either because each heading has its padding/margin in CSS. Top is -80px because that is the height of my fixed header.

.confluence-anchor-link {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

So Now I have two issues I need help with:

1. TOC macro anchors.

2. Anchors in tags other than the p tag.

[Amit Kapoor]

For me the priority right now is #1. TOC macro anchors.

[Amit Kapoor]

Finally, I have the issue fixed. Here is what needs to go in CSS. 80px here is the fixed-header hight. 

/* Pushes the Confluence in-built anchors for all heading levels down by 80px. These anchors are automatically created by Confluence for each heading and appear right before 
the heading.With this, the TOC macro links work just fine. */

h1::before , h2::before , h3::before, h4::before , h5::before , h6::before { 
 display: block; 
 content: " "; 
 margin-top: -75px; 
 height: 75px; 
 visibility: hidden; 
 pointer-events: none;
}


/* Pushes the anchors down a bit when a link tries to open them. This fixes the issue where anchors are hidden behind the header. This Doesn't work if anchor is inside a heading 
tag and not p tag. */

.confluence-anchor-link {
 display: block !important;
 position: relative !important;
 top: -80px !important;
 visibility: hidden !important;
}