I am trying to scroll to my tabs bar when I click on a button

My html(tabs)

<div class="col-xs-12" id="tabs">
  ---All the code here----  
</div>

My js,

  function ScrollTopForTabs(){
    $timeout(function () {
         $('html, body').animate({
            scrollTop: 650
        }, 1000);
    }, 1000);
  }

This was fine up to now but I was given a fixed height. Can anyone please suggest me how to scroll top to div directly.Thanks.

I am trying to scroll to my tabs bar when I click on a button

My html(tabs)

<div class="col-xs-12" id="tabs">
  ---All the code here----  
</div>

My js,

  function ScrollTopForTabs(){
    $timeout(function () {
         $('html, body').animate({
            scrollTop: 650
        }, 1000);
    }, 1000);
  }

This was fine up to now but I was given a fixed height. Can anyone please suggest me how to scroll top to div directly.Thanks.

• javascript
• html
• angularjs
• scroll
• mean

• You should rename "How to scroll to div with angularJS and jQuery" – Thomas Decaux Commented May 23, 2017 at 21:00
• Here is the official documentation for scrolling to a destination docs.angularjs/api/ng/service/$anchorScroll – 120DEV Commented Aug 12, 2017 at 11:49

2 Answers 2

Is a special service in Angular for this, AnchorScroll.

Here is an example from Angular documentation:

<div id="scrollArea" ng-controller="ScrollController">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>

angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
  function($scope, $location, $anchorScroll) {
    $scope.gotoBottom = function() {
      // set the location.hash to the id of
      // the element you wish to scroll to.
      $location.hash('bottom');

      // call $anchorScroll()
      $anchorScroll();
    };
  }]);

try this code

$("#moveup").click(function(){
  $("html, body").stop().animate({
    scrollTop: $('#tabs').offset().top - 40
  }, '500', 'linear');
});

#tabs{
  height:900px;
  background-color:#ccc;
}
#moveup{
  position:fixed;
  font-size:24px;
  bottom:25px;
  right:25px;
  height:10px;
  width:10px;
  color:red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="col-xs-12" id="tabs">
  ---All the code here----  
  <a id="moveup">up</a>
</div>