Scroll from one div to another div in angular

Question

Scroll from one div to another div in angular

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

3

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" >
    </div>

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>
    </div>

How can I solve this in angular

html angular

asked by Gerardo Gutiérrez 01.06.2018 в 18:18

source

3 answers

How to center the crosses in the box? Javascript: The check 2 12 returns true

score 2 · Answer 1

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 () {
        $location.hash("sectionB");
        $anchorScroll();
    };
});

We made a controller and sent to call our service:

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

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.

Greetings.

score 1 · Answer 2

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">
</div>

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){
   e.preventDefault();

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

 });

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

score 0 · Answer 3

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>