Scroll from one div to another div in angular


hello I have a button to which I want that when clicking on this scroll to a div that I have below

    <div class="barra_ver">
      <input type="button" name="bajar"  scrollTo="sectionB" >

the button is inside a div and the div that I want to reach by scrolling is the following:

        <div class="com_fun" id="sectionB" >
      <h1> usted esta aqui </h1>

How can I solve this in angular

asked by Gerardo Gutiérrez 01.06.2018 в 18:18

3 answers


You can add the following code:

We declare the Angular module:

var angularApp = angular.module("angularApp", []);

We perform a service that is responsible for carrying out the scroll to your element with the id " SectionB ":

angularApp.service('scrollService', function ($location, $anchorScroll) {
    this.scrollEnd = function () {

We made a controller and sent to call our service:

angularApp.controller("scrollController", function ($scope, scrollService) {
    $scope.scrollToHash = function () {

Take into account that you must send the controller from your html and your button must be inside. Also, do not forget to call ng-click="scrollToHash()" on the button.

I hope it helps.


answered by 01.06.2018 в 19:28

You can do it with jquery , add a class like that to your button.

<div class="barra_ver">
   <input type="button" name="bajar" class="btn-scroll">

Since you have a id to div that you want to reach you do a simple function in jquery where you first collect the position of your div on the page

var sectionB = $('#sectionB').offset().top;

and then

 $('#btn-scroll').on('click', function(e){

   $('html, body').animate({
       scrollTop: sectionB
   }, 500);


So when your button triggers the event click will take you to the section you want

answered by 01.06.2018 в 18:35

You can use pure HTML to solve it, disguising a link as a button:

.largo {
 width: 200px;
 height: 1600px;
 background: lightgray;

a {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 4px;
  border-radius: 3px;
<a href="#abajo">Pulsa para bajar</a>
<div class="largo">div largo para provocar scroll</div>
<span id="abajo">Has llegado</span>

In my example, I put the CSS, but if you use bootstrap, it's as simple as applying the "btn" class to the <a> element:

<a class="btn">Delete</a>

If you use material it would be something like

<a class="mc-button mc-button-text">Pulsa para bajar </a>
answered by 01.06.2018 в 18:46