2

I've got an AngularJS app, and I have a smooth scrolling directive to force the page to scroll to the bottom. I want the command to only run after the scrolling has finished. You can see that at the moment I run the scrolling function and then I run $('#comment-input').focus(); to focus on an element. I want to change it so this is only ran after the scrolling. I know I need to implement a callback but I can't figure out where to implement it.

(function() {

    var app = angular.module('myApp');

    app.service('anchorSmoothScroll', function(){

        this.scrollTo = function(eID) {

            // This scrolling function 
            // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript

            var startY = currentYPosition();
            var stopY = elmYPosition(eID);
            var distance = stopY > startY ? stopY - startY : startY - stopY;
            if (distance < 100) {
                scrollTo(0, stopY); return;
            }
            var speed = Math.round(distance / 100);
            if (speed >= 20) speed = 20;
            var step = Math.round(distance / 25);
            var leapY = stopY > startY ? startY + step : startY - step;
            var timer = 0;
            if (stopY > startY) {
                for ( var i=startY; i<stopY; i+=step ) {
                    setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                    leapY += step; if (leapY > stopY) leapY = stopY; timer++;
                } return;
            }
            for ( var i=startY; i>stopY; i-=step ) {
                setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
            }

            function currentYPosition() {
                // Firefox, Chrome, Opera, Safari
                if (self.pageYOffset) return self.pageYOffset;
                // Internet Explorer 6 - standards mode
                if (document.documentElement && document.documentElement.scrollTop)
                    return document.documentElement.scrollTop;
                // Internet Explorer 6, 7 and 8
                if (document.body.scrollTop) return document.body.scrollTop;
                return 0;
            }

            function elmYPosition(eID) {
                var elm = document.getElementById(eID);
                var y = elm.offsetTop;
                var node = elm;
                while (node.offsetParent && node.offsetParent != document.body) {
                    node = node.offsetParent;
                    y += node.offsetTop;
                } return y;
            }

        };

    });

    app.controller('TextareaController', ['$scope','$location', 'anchorSmoothScroll',
    function($scope, $location, anchorSmoothScroll) {

        $scope.gotoElement = function (eID){
          // set the location.hash to the id of
          // the element you wish to scroll to.
          $location.hash('bottom-div');

          // call $anchorScroll()
          anchorSmoothScroll.scrollTo(eID);

          $('#comment-input').focus();

        };

    }]);

}());

3 Answers 3

4

I'd suggest creating a function that returns a promise and avoid the loops/timers. Then you can access the function like this:

    smoothScroll(element).then(() => {
      //Execute something when scrolling has finished
    });

The smoothScroll function can be defined like this, without using a lot of timers (the timer that actually is defined is just to reject() the promise if scrolling failed for some reason, such as user interaction):

function smoothScroll(elem, offset = 0) {
  const rect = elem.getBoundingClientRect();
  let targetPosition = Math.floor(rect.top + self.pageYOffset + offset);
  window.scrollTo({
    top: targetPosition,
    behavior: 'smooth'
  });

  return new Promise((resolve, reject) => {
    const failed = setTimeout(() => {
      reject();
    }, 2000);

    const scrollHandler = () => {
      if (self.pageYOffset === targetPosition) {
        window.removeEventListener("scroll", scrollHandler);
        clearTimeout(failed);
        resolve();
      }
    };
    if (self.pageYOffset === targetPosition) {
      clearTimeout(failed);
      resolve();
    } else {
      window.addEventListener("scroll", scrollHandler);
      elem.getBoundingClientRect();
    }
  });
}

I have also made a working example in this pen: https://codepen.io/familjenpersson/pen/bQeEBX

2
  • 1
    Great solution - only thing I had to do was use Math.floor() on targetPosition because sometimes the value was a float which stopped the Promise from resolving let targetPosition = Math.floor(rect.top + self.pageYOffset + offset); Apr 14, 2022 at 12:38
  • Thanks @dryliketoast ! Solution updated as per your suggestion.
    – jonasdev
    Apr 20, 2022 at 14:01
2

Get anchorSmoothScroll.scrollTo to return a promise (using $q) and then focus once the promise is fullfilled. Read here for more info on $q.

anchorSmoothScroll.scrollTo(eID)
     .then(function() {
          $('#comment-input').focus();
     })

EDIT: Your code was failing because you are doing scrollTo inside setTimeout and that's where you would have to resolve your promise. Now, next problem is that there are multiple setTimeouts (as it is inside a for loop), so there would be lots of promises, and that's where $q.all will help.

I have setup a plunker for you, where I have updated one of the execution paths... Have a look here. In the console window, you will see that focusing is printer after scrolling has finished. To make it obvious, I have hard-coded the setTimeout interval to 2 seconds. I hope that helps.

8
  • Thanks for the tip on using $q with Angular, I was just thinking of callbacks. Could you help to figure out where I should be putting the promise in the scrollTo function? Jun 9, 2015 at 9:14
  • At the moment, I'm just using a console.log to test this out with, and the message is actually logged before the scrolling starts. Not sure where the issue is. Jun 9, 2015 at 9:46
  • It would take me quite some time to put it into a plunker right now unfortunately, but the log is being posted before the scrolling begins which is strange. If you PM me I can link you to a live example. Jun 9, 2015 at 10:15
  • I have updated my answer with an updated plunker. That should solve your problem. Jun 9, 2015 at 11:35
  • It doesn't seem to work at all on mobile. Unsure why. There also seems to be no scrolling? The logs you have put in to output while scrolling are not executed even on the plunker? Jun 9, 2015 at 12:03
0

You can eventually try to bind a listener to notice when you reach bottom using

elm.on('scroll', function() {
      if(elm[0].scrollTop === elm[0].scrollHeight)
       $('#comment-input').focus();
    });
2
  • What you you apply this to? The body? Jun 9, 2015 at 9:34
  • Yep if you append the directive to your body then it applies to body
    – Ismapro
    Jun 9, 2015 at 9:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.