arnaudbreton / angular-smoothscroll Goto Github PK
View Code? Open in Web Editor NEWA directive to get a smooth scroll effect
License: MIT License
A directive to get a smooth scroll effect
License: MIT License
Why does the installation using Bower also install these packages?
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...
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
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.
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.
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 = '
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.
Hey what license is this covered under? Could you please specify. Thanks.
I've create a Service of your directive in my project to use the scroll functionality in my Controllers.
My changes:
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
}
});
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).
Example for autoPosition:
angular.element($window).bind('resize', function () {
$log.debug('resize tiggered');
WindowService.autoPosition();
});
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.
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!
This would be nice :)
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.
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!
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 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 ๐
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!
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:
Environment:
Windows 8 - 64bit
Bower 0.9.2
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.