arnaudbreton / angular-smoothscroll Goto Github PK

Hey, could you link an example of your working code? It would be nice for future visitors to see how it functions out in the wild. Thanks!

Hi. Could you please create a semver tag along with the bower.json so that you can register the package with bower. This should allow the entire community to easily set their bower.json dependency to "angular-smoothscroll": "1.0.0" --> or whatever version you deem appropriate.

a link with an href that has a value, and an unrecognised target attribute will open in a new tab.

Unrecognised values for the target attribute (HTML attribute) open in new tabs.

Directive could rather check if it, itself, has an attribute, and then fallback to href should there not be one. This allows one to override the href of an anchor, while allowing smoothscroll to fallback to how browsers work by default should the directive not be supplied an attribute.

<a href="#my-id" smooth-scroll="some-other-id">go to #some-other-id if js</a>

or

<a href="#my-id" smooth-scroll>go to #my-id</a>

I'm trying to make a scroll back to top button and I'm running into an error. Currently I'm not using jQuery but jQMobi. I have not tested to see if jQMobi is the hang up.

HTML:

Error I'm receiving:

Smooth scroll: scrolling to some-div with offset 100 angular.js:5754
Uncaught TypeError: Object function JQLite(element) {
if (element instanceof JQLite) {
return element;
}
if (!(this instanceof JQLite)) {
if (isString(element) && element.charAt(0) != '<') {
throw Error('selectors not implemented');
}
return new JQLite(element);
}

if (isString(element)) {
var div = document.createElement('div');
// Read about the NoScope elements here:
// http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
div.innerHTML = '

LIne 93 of angular-smooth-scroll.coffee calls a method 'warning' of the $log service. This forces an error. According to the AngularJS docs, the $log service has a method called 'warn', not 'warning'

The code should be corrected from:
93 $log.warning 'Smooth scroll: no target specified'

to:
93 $log.warn 'Smooth scroll: no target specified'

Pretty self-explanatory. It would be nice to publish this package to npm. There already seems to be a package.json available, so it shouldn't be too hard.

Here's the steps to publish it.

This would be nice :)

References "main": "dist/scripts/2d8e100/scripts.js",

...but the target file is dist/scripts/c8742280.scripts.js

Could be a broken build script, or just a literal string that hasn't been updated.

Could you please remove jQuery as a dependency if it isn't actually required? Adding it as an optional dependency is okay, but requiring it makes the vanilla JS solution ineffective. Thanks!

Hey what license is this covered under? Could you please specify. Thanks.

Running the command on the bower install angular-smoothscroll I get the following error:

bower cloning git://github.com:arnaudbreton/angular-smoothscroll.git
bower caching git://github.com:arnaudbreton/angular-smoothscroll.git
bower error status code of git: 128

There were errors, here's a summary of them:

• angular-smoothscroll status code of git: 128
  fatal: Unable to look up github.com (port arnaudbreton) (The specified class was
  not found. )

Environment:
Windows 8 - 64bit
Bower 0.9.2

Hello,

I can't use your service. I binded your module in my code.
But I get the error: "Unknown provider: anchorSmoothScrollProvider <- anchorSmoothScroll".

Best regards

Hey.. Thanks for making this directive. It's great and simple, but had a problem in ie8 with it. The callback is not firing. The reason for this is, that there is no support for window.pageYOffset in Ie8.

Another smoothscroll fixed it like this: d-oliveros/ngSmoothScroll@a22fd45

Thanks again!

I've create a Service of your directive in my project to use the scroll functionality in my Controllers.

My changes:

• Split the smoothScroll function to smoothScrollPosition and smoothScroll for the possibility to scroll directly to a position, useful for a "Back to top" button/link.
• Added new parameter to activate / deactivate the smoth animation
• new function called autoPosition to replace angular's $anchorScroll with your angular-smoothscroll.

jumplink.cms.service("WindowService", function(RowService, $rootScope, $window, $timeout, $location, $log) {

  var tigger = function (event) {
    $timeout(function() {
      // anything you want can go here and will safely be run on the next digest.
      angular.element($window).triggerHandler(event);
    })
  }

  /*
   * Retrieve the current vertical position
   * @returns Current vertical position
   */
  var currentYPosition = function() {
    if ($window.pageYOffset) {
      return $window.pageYOffset;
    }
    if ($window.document.documentElement && $window.document.documentElement.scrollTop) {
      return $window.document.documentElement.scrollTop;
    }
    if ($window.document.body.scrollTop) {
      return $window.document.body.scrollTop;
    }
    return 0;
  };

  /*
   * Get the vertical position of a DOM element
   * @param eID The DOM element id
   * @returns The vertical position of element with id eID
   */
  var elmYPosition = function(eID) {
    var elm, node, y;
    elm = document.getElementById(eID);
    if (elm) {
      y = elm.offsetTop;
      node = elm;
      while (node.offsetParent && node.offsetParent !== document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
      }
      return y;
    }
    return 0;
  };

  // FORK of https://github.com/arnaudbreton/angular-smoothscroll
  var smoothScrollPosition = function(stopY, animation) {
    if(!animation) {
      $window.scrollTo(0,stopY);
    }

    var distance, i, leapY, speed, startY, step, stopY, timer, _results;
    startY = currentYPosition();
    distance = (stopY > startY ? stopY - startY : startY - stopY);
    if (distance < 100) {
      scrollTo(0, stopY);
      return;
    }
    speed = Math.round(distance / 100);
    if (speed >= 20) {
      speed = 20;
    }
    step = Math.round(distance / 25);
    leapY = (stopY > startY ? startY + step : startY - step);
    timer = 0;
    if (stopY > startY) {
      i = startY;
      while (i < stopY) {
        setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
        leapY += step;
        if (leapY > stopY) {
          leapY = stopY;
        }
        timer++;
        i += step;
      }
      return;
    }
    i = startY;
    _results = [];
    while (i > stopY) {
      setTimeout('window.scrollTo(0, ' + leapY + ')', timer * speed);
      leapY -= step;
      if (leapY < stopY) {
        leapY = stopY;
      }
      timer++;
      _results.push(i -= step);
    }
    return _results;
  };

  var smoothScroll = function(eID, offSet, animation) {
    var stopY = elmYPosition(eID) - offSet;
    return smoothScrollPosition (stopY, animation);
  }

  var autoPosition = function () {
    var hash = $location.hash();
    if(angular.isDefined(hash) && hash !== '') {
      console.log(hash);
      smoothScroll(hash, 60, true);
    } else {
      smoothScrollPosition(0, false);
    }

  }


  return {
    tigger: tigger
    , smoothScrollPosition: smoothScrollPosition
    , smoothScroll: smoothScroll
    , autoPosition: autoPosition
  }

});

Source: https://github.com/JumpLink/cms/blob/0f95a035bc7bed117393b1685b1fdab3f2aee35d/src/assets/general/js/angular/services.js#L721

If you want to use the autoPosition function you need to inject an empty $anchorScroll that does nothing, so you can use angularSmoothscroll for thinks like that.

angular.module("services",[]).value('$anchorScroll', angular.noop).

Source: https://github.com/JumpLink/cms/blob/0f95a035bc7bed117393b1685b1fdab3f2aee35d/src/assets/general/js/angular/config.js#L29

Example for autoPosition:

  angular.element($window).bind('resize', function () {
    $log.debug('resize tiggered');
    WindowService.autoPosition();
  });

Source: https://github.com/JumpLink/cms/blob/0f95a035bc7bed117393b1685b1fdab3f2aee35d/src/assets/general/js/angular/controllers.js#L100

Do you interested to merge my changes? I would need to rewrite this stuff in CoffeeScript (I have no experience with CoffeeScript yet) and would make it compatible with your directive.

I find your library really neat and minimal, can you make a git tag, and release the library versioned?
People using it in projects can keep track of changes and can update when needed, using versions 👍

Why does the installation using Bower also install these packages?

• angular.js
• es5-shim
• jquery
• json3

This overwrites the version of angular I'm already using in my project. I would assume that most users of this already have angular installed & probably jquery too...

A well styled document should handle where the page scrolls to by default - a default offset of 100px is essentially magic, as the div / element it scrolls to may require a more specific offset - perhaps 1em, etc. The odds of this having to be overridden on a frequent basis are far greater than if it is set to a safe and unassuming 0, allowing CSS to account for spacing within elements or containers.

i.e. with offset=100

<div id="some-div" style="background-color: grey; padding-top: 2rem;">
  content
</div>

will show a nasty 100px band of colour above this div from the previous content.

Setting offset=0 by default will ensure that the styling can handle this instead. Not setting padding would sit the content right against the top of the div - a design faux pas - so the CSS / design should naturally handle the case for offset=0.

For special cases, the scroll element may set a custom offset, as per usual.