focus on specific div when controller load first time angularjs

Question

app.controller('homeCtrl', function($scope, $log, $location, $http, dataService, blockUI) {
var self = $scope;
self.init = function() {
    $log.info("home controller loaded");
    $('html,body').animate({scrollTop: $("#services_div").offset().top-80},'slow');
};
self.init();
});

This is my code i want when page load focus go to specific div but this is not working because my controller load before html page load fully. Even i have tried using window.onload but that also doesn't work for me. please suggest some way to do so.

this is my html code:

<section class="serviceBanner">
<div class="topBar">
    <div class="container group">
        <div class="breadcrums">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="javascript:void(0);">Service We Offer</a></li>
                <li>Car Servicing</li>
            </ul>
        </div>
        <!--//breadcrums-->
    </div>
    <!--//container-->
</div>
<!--//topBar-->

<div class="container" id="bookNowDiv">
    <div class="servicebanContent text-center">
        <h2>Our Services</h2>
        <h1>Vehicle Servicing</h1>
        <p>Every vehicle needs care and maintenance.</p>
        <p>Get your vehicle serviced now, avoid breakdowns!</p>
        <p class="banButton">
            <a href="service/vehicle" id="btnBookNow">BOOK NOW</a>
        </p>
    </div>
    <!--//servicebanContent-->
</div>
<!--//container-->

Just check the links: http://stackoverflow.com/questions/15458609/execute-function-on-page-load http://stackoverflow.com/questions/27194805/angularjs-on-page-load-call-function — choudhury smrutiranjan parida, Oct 06 '16 at 05:32

score 0 · Answer 1 · answered Oct 06 '16 at 05:35

0

You can add the data-ng-init attribute to the element which you need to focus. This will wait until the element has been loaded, and fire a function when it has been.

<div name="element-to-focus" data-ng-init="init()"></div>

You're generally not supposed to use data-ng-init this way, but in this case it should work fine and shouldn't cause any issues.

answered Oct 06 '16 at 05:35

Joseph

865
5
20

@pooja Did you try window.onload or $window.onload? $window is angular's version of window, and might work better. – Joseph Oct 06 '16 at 05:46
yes i try $window.onload but still facing same issue.If i first time load the page it go to that div then suddenly it go in bottom. If go to bottom and at same time i refresh that page then that focus first go my specific div and suddenly it come back at bottom. – pooja Oct 06 '16 at 06:02

Krupesh Kotecha · Answer 2 · 2016-10-06T06:46:10.547

Try this

var app = angular.module('demo', []);
app.controller('Ctrl', function($scope, $window) {
  var $target = $("#email");
  $("body").animate({
    scrollTop: $target.offset().top
  }, "slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="Ctrl">
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div id="email">sdfsdfsdf</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
  <div>demo message</div>
</div>

this solution is creating issue. When i try to go my page it changes my url from http://localhost:8888/services to http://localhost:8888/services#bookNowDiv. Due to this i am not able to go to my page. — pooja, Oct 06 '16 at 06:39
it work a bit for me but i am have a issue. when i scroll down at bottom and at same time at bottom i refresh the page then first focus come to that specific div and suddenly it come back at bottom. No idea how — pooja, Oct 06 '16 at 06:59
Each time you refresh page, controller is reloaded. so what you want? you want to focus div only for single time? — Krupesh Kotecha, Oct 06 '16 at 07:03
i want to focus that div whenever page load but it is not focusing that div . when page load it focuses that div for second and suddenly it changes. — pooja, Oct 06 '16 at 07:20
Please provide some html code. it may possible that some other event got fire after focusing div. — Krupesh Kotecha, Oct 06 '16 at 07:25
see what is happening if i left the scroll at end and then refresh the page then that scroll again come at end instead of coming on my specific div. — pooja, Oct 06 '16 at 07:28
after refreshing, write in console `location.href` and see is there any `#` available at end? — Krupesh Kotecha, Oct 06 '16 at 08:26
no there is no # at end. I thing there must be some js issue but i am not able to find that. — pooja, Oct 06 '16 at 08:31
if i left scroll any where in my page i.e at center or at bottom after refreshing page that scroll exactly come back to that position where i left that scroll before refreshing the page. — pooja, Oct 06 '16 at 08:35

focus on specific div when controller load first time angularjs

2 Answers2