Scroll Automatically to the Bottom of the Page in Service Portal

[salu]

Hello,

Consider I have a list of questions. When I click on the first question, it should automatically take me to the bottom of the page.

window.scrollTo(0,document.body.scrollHeight); won't work as document won't work in API.

Thanks

Saranya

[mansoor3]

Hi Saranya,

For that thing, I am not sure how that is possible. Though I did something with onchange below try this.

$scope.$on("field.change", function(evt, parms){
   if (parms.field.sys_id == "sys_id shown in elements") {// can see the sys id by clicking F12 and in elements tab
 //here use that scroll option and check
   $rootScope.$broadcast("location.updated", parms.field.value);}
   });

Check this link to understand the concept of rootscope " https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/ "

-Mansoor

-Mark correct or helpful as applicable.

[salu]

mansoor

Hello Mansoor,

I have used the below code and its scrolling down to bottom but once it scrolled bottom its redirecting to the first question.Can you help me to fix it.

$scope.$on("field.change", function(evt, parms){

  if (parms.field.sys_id == "7b389a854fee6240bb603f828110c710") {

  $location.hash('b810f4d14fd22e00670df0318110c760');    

  $anchorScroll();

  $rootScope.$broadcast("location.updated", parms.field.value);

  }

  });

Thanks

Saranya

[salu · Accepted solution]

Hello Mansoor,

I got the solution for the same.

$scope.scrollTo = function(id) {

var old = $location.hash();

$location.hash(id);

$anchorScroll();

//reset to old to keep any additional routing logic from kicking in

$location.hash(old);

};

<sp-model form-model="::data.sc_cat_item" mandatory="mandatory" ng-click="scrollTo('e30904d54f83e200bb603f828110c721')"   ></sp-model>

[renakhanna]

Hello Saranya

This Is My UI Script

(function() {

var contentWindow = '',

iframeArray = [],

pollingDelay = 250,

prevHeight,

src = '',

blacklist = [],

bottomMargin = 30;

/**

  * Executes the proper calculation strategy and returns the internal height of the iframe.   You should edit this function if you find strategies that are not accounted for

  * @function getHeight

  */

var getHeight = function() {

if (contentWindow.$j('body')[0].style.overflow != 'hidden') {

contentWindow.$j('body')[0].style.overflow = 'hidden';

}

//if (iframePageIs('$knowledge.do') || iframePageIs('knowledge_home_launcher.do')) {

if (iframePageIs('$knowledge.do')) {

// Knowledge v3 UI

// Shrink iframe when the src changes to force a recalculation

if (src != contentWindow.location.href) {

src = contentWindow.location.href;

return 700;

}

return getTotalHeight(['.application'], 0);

}

else if (iframePageIs('kb_view.do')) {

return getTotalHeight([

'body > .outputmsg_div',

'body > .navbar',

'.kb-view-content-wrapper',

'.snc-article-header-author',

'.snc-article-footer-section',

'.snc-article-footer'

], 0);

}

else if (iframePageIs('kb_home.do')) {

return getTotalHeight([

'body .navbar',

'body > .kb_main'

], bottomMargin);

}

else

return null;

};

/**

  * @function getTotalHeight

  * @param {array} divs - Array of CSS selectors that identify the div's whose height should be added in the calculation

  * @param {int} modifier - Number of additional pixels to add as a modifier

  */

var getTotalHeight = function(divs, modifier) {

var h = 0;

$j.each(divs, function(ix, val) {

h = h + contentWindow.$j(val).height();

});

return h + modifier;

};

/**

  * Determines if the url contains the given fragment

  * @function iframePageIs

  * @param {string} urlFragment - String to search for in the iframe url

  *

  */

var iframePageIs = function (urlFragment) {

return (contentWindow.location.href.indexOf(urlFragment) != -1);

};

/**

  * A recursive polling function that gets the internal height of the iframe and resizes the it accordingly.

  * @function resizeIframeFix

  */

var resizeIframeFix = function(iframe) {

setTimeout(function() {

var curHeight;

var i;

for (i = 0; i < blacklist.length; i++) {

if (iframePageIs(blacklist[i])) {

return;

}

}

if ($j && contentWindow.$j) {

curHeight = getHeight();

if (curHeight !== null && prevHeight != curHeight) {

$j(iframe).height(curHeight);

prevHeight = getHeight();

}

}

resizeIframeFix(iframe);

}, pollingDelay);

};

// Initiate knowledge page resize if we are in iframe and not in platform UI iframe

if (top != window && top.location.pathname != '/navpage.do' && top.location.pathname != '/nav_to.do') {

//detect end of page - scrolling

$j(top).scroll(function() {

if(top && typeof angular !== 'undefined'){

if($j(top).scrollTop() + $j(top).height() == $j(top.document).height()) {

var articleScope = angular.element($j('div[articles-container]')[0]).scope(),

searchScope = angular.element($j('.search-results')[0]).scope();

if(articleScope)

articleScope.$parent.$parent.getArticlesAndQuestions();

if(searchScope)

searchScope.$parent.$parent.executeSearch(searchScope.filterQuery.keywords);

}

}

});

//resizing

parent.addAfterPageLoadedEvent(function() {

contentWindow = window; //iframe window

resizeIframeFix(parent.window.$j('iframe'));

});

}

})();

[Bill Bonnett]

I found this also works:

<input type="button" onclick="$('#c')[0].focus()" value="test focus" />

<div>

      <div id="c" tabindex="1" style="margin-top:800px;">testing</div>

</div>

Edit fiddle - JSFiddle

So I had a widget that displayed KB categories. When clicked, it would populate the kb_article_list widget. But the issue I had was the the category widget was very long and when you clicked on an article, it wouldn't focus on the kb_article_list. So I did this:

In the kb_article_list widget, I added this:

            <div id="articles_section" tabindex="1" class="panel-heading">

Then in the category widget I put this into the client controller:

          $('#articles_section')[0].focus(); // jump to articles_section of the public_kb_article widget

It's a lot less coding than the alternatives. I hope this helps.