Scroll up drag in web page

I'm looking to scroll up a page when I have a div selected, so the goal is to drag a div and move the page up. The scoll down works strangely.

Is there a problem with angular or html that would be listed?

(I don't want to use Jquery)

 <div class="panel panel-default">
  <div class="panel-body">
    <p class="h4">Commandes</p>
    <div class="row">
      <div class="col-md-12 col-xs-12 text-right" draggable="true">
        <button type="button" (click)="addCommande()" class="btn btn-labeled btn-purple m-l-4">
          <span class="btn-label"><i class="fa fa-plus"></i></span><span class="hidden-xs">Ajouter une commande</span>
        </button>

      </div>
    </div>...

Solution 1:

edit

adding solutions based on our discussion in the comments section

im still not sure if I got your end goal, but I hope I did

[first solution]
add `scrollPositionRestoration: 'enabled'` to `app-routing.module.ts` 's `RouterModule`:
 RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
[second solution]
try implementing this logic]
export class ScrollToTopComponent implements OnInit {
  windowScrolled: boolean;
  constructor(@Inject(DOCUMENT) private document: Document) {}
  @HostListener("window:scroll", [])
  onWindowScroll() {
      if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 100) {
          this.windowScrolled = true;
      } 
     else if (this.windowScrolled && window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop < 10) {
          this.windowScrolled = false;
      }
  }
  scrollToTop() {
      (function smoothscroll() {
          var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
          if (currentScroll > 0) {
              window.requestAnimationFrame(smoothscroll);
              window.scrollTo(0, currentScroll - (currentScroll / 8));
          }
      })();
  }
  ngOnInit() {}
[third solution]
If all fails, then create some empty HTML element (eg: div) at the top (or desired scroll to location) with id="top":
<div id="top"></div>

And in component:

ngAfterViewInit() {
    // Hack: Scrolls to top of Page after page view initialized
    let top = document.getElementById('top');
    if (top !== null) {
      top.scrollIntoView();
      top = null;
    }
  }

I dont have much to work with regarding how you built your code, but I hope this might solve it (it will make draggable items scroll your screen) :)

var stop = true;
document.quertSelector(".draggable").on("drag", function (e) {

    stop = true;

    if (e.originalEvent.clientY < 150) {
        stop = false;
        scroll(-1)
    }

    if (e.originalEvent.clientY > ($(window).height() - 150)) {
        stop = false;
        scroll(1)
    }

});

document.querySelector(".draggable").on("dragend", function (e) {
     stop = true;
});

var scroll = function (step) {
    var scrollY = window.pageYOffset;
    window.pageYOffset(scrollY + step);
    if (!stop) {
        setTimeout(function () { scroll(step) }, 20);
    }
}