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]

If you need it on onchange of a variable try in that, else use that widget client controller.

Widget Client Script

Sample onchange script which I used.

$scope.$on("field.change", function(evt, parms){
if (parms.field.name == "field__name")

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

-Mansoor

-Mark correct or helpful as applicable

[salu]

Hello Mansoor,

Thanks for the reply.

Its not working for me .

In my catalog widget I have added like below.

HTML

<button id="button" name="submit" ng-disabled="submitted" ng-click="triggerOnSubmit()" ng-click="gotoBottom()"class="btn btn-primary">{{submitButtonMsg}}</button>

Client Script

$scope.gotoBottom = function() {

    // set the location.hash to the id of

    // the element you wish to scroll to.

  $location.hash("button");//bottom is an element id

    // call $anchorScroll()

  $anchorScroll();

    };

[salu]

mansoor

Hello Mansoor,

I have tried the below HTML and widget client script added in my catalog item widget and while clicking it is working.On change of variable I need to scroll to the bottom of the page.Can you help me on this

<input type="button" value="Scroll to Bottom" ng-click="scrollToBottom()">  

function ($scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce,$location,$anchorScroll) {

$scope.scrollToBottom = function(){

  // set id of element you want to scroll

  $location.hash('button');          

        $anchorScroll();

}

}

[mansoor3]

Hi Saranya,

In the place of "$location.hash('button');" // button is a element id of an div in the bottom. for example "<div id = "button" > copyright </div>".

So please replace button by any element id which mentioned below in your widget, to get element id click F12 and in the Elements tab select bottom div like below.

Also for demo please try this link AngularJS - anchor Scroll.

-Mansoor

-Mark correct or helpful as applicable.

[salu]

mansoor

Hello Mansoor,

This is working fine.It scrolling down to the bottom of page.

My record producer is below..Based on first question second question will populate.After clicking in the second question only page will become that is working fine now.

In the first question there I don't want this scroll now I need double click in the question.

Is there any way to add this scroll option on change of my variable in record producer catalog client script.so it will serve my purpose.