Anchor Points on the Portal?

[aliciawhitney]

Hello - pretty new to coding. My company is on Helsinki, and we have an end user Portal. I have created some anchor points in a knowledge article using the method here: ServiceNow Knowledge: Create Anchor (Internal) Links in an Article | IT@UMN

The good news is that it worked when I viewed the article from ServiceNow (Fulfiller side). However, when I go to the same document from our Portal, the anchors act strange. The links go to the anchors, but after about 2-5 seconds, the page automatically redirects to the top of the article. In other words, the webpage will not stay where the anchor is located in the article, and you can't really use the links to navigate because they keep taking you to the top of the article. Does anyone have a clue why anchors in Knowledge articles don't work the same on Fulfiller vs Portal side, and maybe have a solution? Thanks for the help!

[Goran WitchDoc]

Hi Alicia,

Problem is that in Service Portal we are using Angular and the fulfiller side isn't. To get this to work I think you need to redo the whole page/widget that displays knowledge documents to get it to work. I'm in a bit on deep water here, but take a look at nathanfirth answer here: Re: Helsinki Service Portal - Questions

"

You cannot use anchors for linking in an Angular environment as Angular uses anchors for navigating within a single page app. Try taking a look at the following post which documents the $anchorScroll service: Try, Catch, Fail: Angular JS - Scrolling To An Element By Id

"

[nathanfirth]

I've found another trick that works most of the time for linking via anchor tags.

Set the hyperlink with target="_self" and it will scroll:

    <a href="#anchor" target="_self">link</a>

Also it works best by setting the scroll to point using an ID:

<div id="anchor">Scroll to here</div>

The issue we've noticed is that after scrolling to the correct location, sometimes it bounces up. I think what happens is that Angular sees it as a URL change and reloads the page which causes the jump. But the above method works good enough for most cases. The other option as you mentioned, is to use the Angular specific $anchorScroll service.

[michal_v]

Hey Nathan,

Can you please insruct me on how to add $anchorScroll to my widget?

I added it via an angular provider type service and name it $anchorScroll. I called it in my client controller like this:

$scope.scroll = function(id) {

$location.hash(id);

$anchorScroll();

};

I get scrolled to the correct anchor but it is still refershing the page and scrolling back to top, also I get the following error in the browser console:

Thanks,

Michal

[nathanfirth]

That means the $anchorScroll service is not being included, you would need to add the service as a js_include in the theme or as a widget dependency and then include it in the function declaration. Another option to look at is inside the "SC Order Guide" widget which includes an example of a function on spUtil called scrollTo which can take a ID property:

spUtil.scrollTo("#theIDtoScrollTo");