Scroll up drag in web page

Question

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>...

Can you add a code snippet or some kind of fiddle? its hard to guess what you did :) — Guy Nachshon, Jan 17 '22 at 16:03
Thank you very much for your answer but I don't think the code would be very interesting here. Basically I click on a line (div) and I do a drag and drop (so far everything works) but I would like to go to the top of the page when I remain in "clicked" mode on it. And it works downwards, not upwards. And for it to work I have to use the up arrow of the scroll bar. I don't know if I'm explaining my problem well... Thanks — Tal Zana, Jan 17 '22 at 16:33
it can still help. sometimes things happen because we have errors, and furthermore it would help me (and the community) give you a whole answer that will fit your needs in the best way — Guy Nachshon, Jan 17 '22 at 16:42
Yes you are right I will try to detail more but I have a lot of code, I have to try to target. — Tal Zana, Jan 17 '22 at 16:49
We still need your JS. in any way I added a pseudo-code as an answer. let me know if it helped :) — Guy Nachshon, Jan 17 '22 at 17:46

Guy Nachshon · Accepted Answer · 2022-01-18T10:44:19.433

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);
    }
}

I think my question may have been asked incorrectly in fact I am trying to scroll up the page by having an element that is clicked. In fact I want the page to scroll up when I take the element and stick it to the Nav bar. Exactly the same principle as with the footer. I always thought it was self-managed but apparently it's not. — Tal Zana, Jan 18 '22 at 09:58
im confused, do you want to click a button to scroll your page up (kind of 'scroll to top' button) or to be able to scroll the page up if you drag an element to the top of your viewport? — Guy Nachshon, Jan 18 '22 at 10:08
Don't be confused I must explain myself badly, here is the logic in which I wanted to implement my solution. https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click/48048822 — Tal Zana, Jan 18 '22 at 10:18
So when you click a div you want to scroll to the top of the page with the new content? — Guy Nachshon, Jan 18 '22 at 10:25