On clicking article number in breadcrumb, it should take us to the top of the page

[Harsha Pandey]

Hi @Nehal Dhuri @Ankur Bawiskar ,

There is a breadcrumb on Service Portal OOB when we open any article . I have modified the breadcrumb as it is taking article number as well along with article short description. Now when anybody clicks on this article number in breadcrumb, it should take us to the top of the page. I tried to achieve this but it is not working, I am not sure through which widget it will work. Can you please let me know the changes and in which widget do I need to make changes,
There are 2 widgets related OOB-> Knowledge Breadcrumbs and Knowledge Article Content Widget. The Knowledge Article Content widget has the scroll bars.

HTML:

 <div ng-class="c.data.showSearchBox ? 'col-md-7' : 'col-md-12'" class="breadcrumbs">
    <ul class="nav nav-pills nav-sm">
        <li><a ng-href="?id={{portal.homepage_dv}}">${Home}</a></li>
         <li><i class="fa fa-chevron-right"></i></li>
            <!--<li ng-if="portal.homepage_dv != 'kb_home'"><a ng-href="?id={{$root.showKbHomeLink? portal.kb_knowledge_page_dv : 'kb_home'}}">${Knowledge}</a></li>
              
      <li ng-if="portal.homepage_dv != 'kb_home'"><i class="fa fa-chevron-right"></i></li>  -->
            <li
                ng-if="!c.breadcrumbs && c.data.page_id!='kb_article_view'"><a href ng-bind="::page.title"></a></li> 
      
          <li ng-repeat-start="item in c.breadcrumbs"> 
     <a ng-href="{{::item.url}}" ng-bind="::item.label"></a>

        </li>
        <li ng-if="!$last" ng-repeat-end>
            <i class="fa fa-chevron-right"></i>
        </li>
    </ul>
   
   
</div>
<div ng-if="c.data.showSearchBox" class="col-md-5 typeahead-search">
    <widget id="typeahead-search" options="data.search_options"></widget>
</div>

Client Script:

function($scope, $rootScope, $timeout) {    
    var c = this;            
    
    $rootScope.showKbHomeLink = c.data.showKbHomeLink;
    
    $scope.$on("sp.update.breadcrumbs", function(e, list) {        
        c.breadcrumbs = list;
    });
    
    $timeout(function(){
        if($rootScope.readOnly){
            $(".nav-pills").find("a").removeAttr("href").addClass("disabled"); 
        }
    },200);
    
 
}

Thanks,

Harsha

[Ankur Bawiskar]

@Harsha Pandey 

I will recommend to avoid customization and keep process as OOTB.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Harsha Pandey]

We have custom application and the widgets are cloned.

Thanks,

Harsha

[Nehal Dhuri]

Hey @Harsha Pandey ,

You need to update the knowledge article widget for this, find the code where you have configured the breadcrumb data to show article number and short description.

In breadcrumb data add url parameter like following

url: '#'

[Harsha34]

Hi Nehal,

I tried this, it worked!! Thanks lot for your help.