d-oliveros/ngsmoothscroll

AngularJS directives for animating smooth scrolling to elements.

ngsmoothscroll's Issues

Minified version didn't work

Minified version of the script didn't work, I copied angular-smooth-scroll.js and works fine!

v1.7.4 is not backwards-compatible with v1.7.x

The last release v1.7.4 was released as a patch release.
According to semantic versioning a patch release is for backward-compatible bug fixes.

I'm using bower to manage my dependencies and I have the following dependency:

 "ngSmoothScroll": "~1.7.1",

which means that I will automatically update to the newest PATCH version.

With the newest release v1.7.4 the file angular-smooth-scroll.js was moved to dist/angular-smooth-scroll.js which is breaking the builds of my already released artifacts.

I suggest making this new release a major release because it is not backwards-compatible.

Same name for directive and factory?

Wouldn't it be safer to use different names?

smoothScroll service not working for me

Hi,

I´m trying to use your service but it´s not working in my code. I tried to read about versions and dependencies but I couldn´t see anything. My angular app is running in angular1.0.7. Which is the minimum Angular version that is working?

My sample code:
HTML:

...
<div id="boats-top" class="span9">
...
<a ng-click="selectPage(page)" class="cursor-pointer">{{page}}</a>
...

JS:

$scope.selectPage = function(page) {            	    		
    		var element = document.getElementById('boats-top');
			smoothScroll(element);
        };

It does nothing. No errors in browser console. Maybe it´s the Angular version.

An another additional issue. Maybe you want to split in a new issue. I´m trying to use the service as workaround, because directive is not working either. I´m trying to use it with Bootstrap 2.3.2 pagination. If you add the directive, then bootstrap pagination doesn´t work anymore.

Reuse for scrollable elements?

The main factory 'smoothScroll' has hard-coded dependency on 'window' and 'document'. Would it be easy to make it re-usable for scrollable elements other than main window?

IE8 - Not compatible "TypeError: Object doesn't support this property or method"

Hi there,

I'm trying to get this awsome plugin for my AngularJS application on IE8 browser.
Is it fully compatible with this old browser ? If not, do you plan to make it compatible with older IE versions ?

Thanks.

scrolling not working

Through console logging I can see messages like 'about to scroll to element' and 'scrolled to element' along with the html code but the page doesn't actually scroll to the div with mentioned id.

I'm using angularjs with ui router. Testing on chrome (newest version)

//code
var options = {
duration: 700,
easing: 'easeInQuad',
offset: 400,
callbackBefore: function (element) {
console.log('about to scroll to element', element);
},
callbackAfter: function (element) {
console.log('scrolled to element', element);
}
};

var ele = document.getElementById('about');
smoothScroll(ele,options);

Problems with Firefox v27.0.1

Hi, I'm having problems with smooth-scroll on Firefox, it just doesn't seem to fire the scroll either as a directive or service. no error feedback on the console, once it's clicked just stands there. all other browsers I've checked work great, thanks for the effort, please help me if you can.

scroll getting stuck at the bottom of the page

I am calling the scroll-to for a few points in a scroll container. When I scroll to the point at the bottom of the container, I can't scroll back up because the animation is stopping it. I see this is because the internalHeight >= scrollHeight in the stopAnimation()

if ( ( // condition 1 position == endLocation ) || ( // condition 2 currentLocation == endLocation ) || ( // condition 3 internalHeight >= scrollHeight ) ) { // stop clearInterval(runAnimation); callbackAfter(element); }

How can I fix this? I need to go back to the top of the page!!!

smoothScroll doesn't work on SVG Elements

Trying to use this awesome directive with SVG elements does not work.
I seems the end position could not be calculated for SVG Elements.

I made a workaround by using the offset option and calculating the SVG-Element position.
Would be aweseome if you integrate SVG support.

Position for svg element can be calculated like this:

//is SVG Element? 
if( element instanceof SVGElement) {
 return calcSVGPosition(element)
}
else calcNormalEndPosition(...);


function calcSVGPosition(element){
  var elementsRelativYPosition = element.getScreenCTM().f;
  var currentPos = $window.pageYOffset;
  var elementsAbsolutYPosition = currentPos + elementsRelativYPosition; 
  return elementsAbsolutYPosition;
}

Document method to disable an easing pattern

Currently you can disable using easing="none" in the element. But there is no documentation regarding this. Setting easing="" does nothing.

publish to NPM please

Love your script but I'm moving away from bower to NPM for front end packages, would love to be able to use it there. kthnxbye

Error: [$injector:unpr] Unknown provider: smoothScrollProvider <- smoothScroll <- IndexCtrl

I'm using Angular-meteor to do my application. I'm trying to create a smoothscroll anchor so when a user clicks on a button it goes in the same view to an anchor somewhere in the view.

I'm trying to implement this plugin but when I do

'use strict'

angular.module('myApp')
.controller('IndexCtrl', ['$scope', '$meteor', '$anchorScroll', '$location', 'smoothScroll',function ($scope, $meteor, $anchorScroll, $location, smoothScroll) {
...
}]);

I get the title error.

What am I doing wrong?

Support promises on callback-before

It would be nice if callback-before would support thenable objects (promises) as well. It would simplify things when one needs to trigger the scrolling after some other promise (which is triggered by clicking the link) is finished.

For example, we have overflow: hidden on document when showing an aside menu. When user clicks a menu item, it is closed returning a promise and then we would like to scroll to proper element on the page. However, since closing the aside menu takes some time, scrolling doesn't work most of the time, because it does not wait for callback-before to finish in case it's an async call like promise.

Hope it makes sense. I think that the change will be very simple. Can post a PR if interested. It just seems that callback-before might not be the right place for this.

Version is not still released

When installing from bower install it installs 1.7.1 (not yet published 1.7.3 tag...)

unknown provider

This must be a really simple issue but I can't solve that.

I'm getting this error:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.9/$injector/unpr?p0=smoothScrollProvider%20%3C-

Installed "ngSmoothScroll": "~2.0.0" with Bower.

Is this how I'm supposed to inject it?
QuizApp.controller('QuizCtrl', ['smoothScroll', function(smoothScroll) { ...
Thanks

When page is scrolled to the bottom, scroll-to does not work

When page is scrolled to the bottom, scroll-to does not work. I found an work around for this as below

var getScrollLocation = function() {
return window.pageYOffset ? window.pageYOffset -1: document.documentElement.scrollTop-1;
};

or var startLocation = getScrollLocation()-1,

Could you fix this please?

Offset on end element using "scrollTo" directive

I would like to apply an offset to the element being scrolled to using the scrollTo directive.

Applying the offset attribute to either the element scrolling or the element being scrolled to doesn't work, nor is the attribute documented wrt. usage with scrollTo.

Is this behaviour currently supported?

Cheers!

Scrolling cannot initiate when scroll position is at extreme bottom inside a container.

To replicate, call smoothScroll() with containerId corresponding to the container when the container is scrolled all the way to the bottom.

Scrolling to bottom does not work in container

When using a container ('containerId' is set), the scrolling behaviour is broken when the bottom of the container would be reached by scrolling.

This fixed the problem for me (from line 111):

var stopAnimation = function () {
    currentLocation = getScrollLocation();
    if(containerPresent) {
        scrollHeight = container.scrollHeight;
        internalHeight = container.clientHeight + currentLocation;
    } else {
        scrollHeight = document.body.scrollheight;
        internalHeight = window.innerHeight + currentLocation;
    }
...

Having a hard time understanding the usage of this directive

I'm trying to understand how to use this directive. I'm trying to use the basic smoothScroll directive, and not having any succes.

I'm including the minified version of the library in my application. I also inject the module into my angular app

angular.module('myApp', ['smoothScroll'])

I've included the attribute in my HTML code

<div smooth-scroll>

What am I missing?

Here is my jsFiddle

V2.0.0 possible bug for condition for stopAnimation

Hi,
In the new version 2.0.0, you have in line 127:

scrollHeight = document.body.scrollheight;

The correct attribute is: scrollHeight (H in uppercase). It's ok in version 1.1.7:

scrollHeight = document.body.scrollHeight;

Not a bug but for condition 1 and 2, use '===' (instead ==) in line 123 et 125,

if (
    ( // condition 1
        position === endLocation
    ) ||
    ( // condition 2
        currentLocation === endLocation
    ) ||

Philippe

the scoll doens't work as expected if you include ngAnimate

Including the ngAnimate module on angular 1.4 causes the scrolling to stop short of its target element

How to add active class??

Hi,

i have the scroll down section in my web app but i want to show active class , when user scrolls down the screen manually..

Please reply ASAP

not compatible with ui-sref

I've added a scroll-to attribute to an existing tag with a ui-sref attribute and the scrolling seems to negate the state change.

So the effect is that the scroll works ok, but the ui-router state doesn't change. For now, I'm using a callback to explicitly change the state, but I'd much rather have it work as expected:

Nav link

smoothly scrolls to the target point and changes state.

Any thoughts?

Documentation

Hi,
I am new to Angular directives and I find that the documentation lacks a little clarity on how to implement the smooth scroll. Was trying to integrate it but failed to achieve this. I did not understand which part of the code is the initialiser and which is the target. My solution to this would be to add a small example with a clear implementation instead of examples with the different options. This would help people like me a lot!
Thanks! ;)

feature request: Use requestAnimationFrame instead of setInterval.

request animation frame will enable the highest flicker-less frame rate without overworking the CPU on dropped frames.

1.7.3 version not available on Bower

Is there any way to install the 1.7.3 version using Bower?

Thanks

does not work well with ngRoute and $location

It seems to intercept and cancel what would normaly work for ngRoute or $location.
a href="#/tosomeplace" won't work if combined with scroll-to attribute.
Similar problem happens if I use a callback-before attribut to a method that alters $location.path, it is disregarded.
It would be good to have it work correctly for with ngroute so you can do both smooth scroll and change the view.

Scrollspy or active state

It could be nice to add an "active" class on the link when its linked div is displayed, so a scrollspy.

Doesn't scroll to element if it is offset by a top margin...

Hello!

I'm really liking this module, but it seems that it doesn't take into account the ending element's top margin. I'm not sure if this is a bug or there is something I'm missing, but I thought I'd bring it to your attention.

Thanks!

scrollTo broken in min.js but working in .js

Hi, I tried to use your directive with the following code :

<div class="part-1">
     <div scroll-to="part-3">Scroll</div>
</div>
<div class="part-2"></div>
<div class="part-3" id="part-3"></div>

When I included the angular-smooth-scroll.min.js file (I didn't forgot to include it as a dependency as well), nothing happened. I tried in a vanilla app and I got the same result.
By nothing happend I mean:

• No scroll with scroll-to="someId"
• No scroll on document load with smooth-scroll
• No errors
• Tell me if you want me to try something else

After a while, I just tried to include the angular-smooth-scroll.js instead and everything worked fine.

Hope it helped, sorry for my english. Cheers.

How can I change the default offset for all the website?

I want the offset to be 60 as I have a header all over the website.
How can I change the default offset (maybe in config part? using the provider?)

Cheers,
Shai

Stop scroll bubbling

How to stop event propagation/bubbling in the case below?

Go to Second!

I want that just the second event happens, and the first one blocked, since I want that a user could click inside the

and it will auto scroll to fit the page, and if the user click on the button the page scroll to another section.

smoothScroll as a service works in .js but not in min.js

I think the min.js file in this repo is broken. I saw an other issue complaining about scroll-to directive not working. The same case with me but with smoothScroll service in controller. If the lib/.js file is included it works, if the dist/.min.js file is included, it does not work.

issues with bootstrap navbar toggle

Can't get this to work with bootstrap's navbar toggle.

<li  data-toggle="collapse" data-target=".navbar-collapse"><a href="#" scroll-to="aboutus" >About</a></li>

It scrolls but menu doesn't toggle, if I remove scroll-to it works fine. Please do let me know if anyone has any workaround.

scrolling does not work when overflow-x: hidden is set

Any ideas on how to keep the plugin working with overflow-x set to hidden? I noticed that setting an overflow property makes it so scrolling does not work at all.

Found out bootstrap was causing a weird issue with margins and padding which I have fixed. However, this issue with scrolling and overflow is still there in case someone is in "need" of setting overflow settings.

Will keep open to see if others may need this looked into.

Feature request: Stop animation on mousewheel

Currently, when animation starts and user scrolls, page 'jumps' a few times. An option stopOnUserScroll and listening to wheel/scroll that clears the interval would solve it.

Watch properties used at "scroll-if"

Currently this module does not scroll to a given element if a property in the "scroll-if" is updated later. The use-case is useful if I want to scroll to an element given an specific condition.

The result should make something like this work: http://plnkr.co/edit/EkH0bObnREw0WDyETfjN?p=preview

"Click to scroll" should scroll to the last element, it currently doesn't because the module does not watch the scrollable id.

Breaks scrolling with -webkit-overflow-scrolling: touch; on iOS

momentum scrolling works fine... but once smoothScroll activated it stops teh container from scrolling. smoothScroll continues to work... its just i cannot scroll it with on touch anymore
]

Avoiding form submit when used in submit button.

I'm using it in the submit button of a form and it's preventing the submission. Here it is my code.
<md-button type="submit" ng-disabled="patientSearchForm.$invalid" class="md-raised md-primary md-button" scroll-to="search-result" container-id="view-container" offset="90"> SEARCH </md-button>

Feature request: add bower support

Allow users to inject this module as a dependency using bower.

scroll-to directive not working on touchscreen

this callback is not fired on touchscreen devices.

Not working on IE11

Hi,

Having issue with IE11 where the scroll doesn't work, and I've tried many, many combinations. I have an angular service that I pass an element to (tried via ID's, classes, containerId option...) and this is the one I've settled on that is the simplest and works on all other systems/browsers:

**JS**
var $element = angular.element(element)[0];

$timeout(function () {
    smoothScroll($element);
}, 250);

**HTML**
<div class="the-form">
    <div> ... </div>
    <div> ... </div>
    <div> ... </div>
    <div>
        <a href="#" onclick="submitForm()">Submit</a>
    </div>
</div>

I call the service with .the-form. I call this service after a successful $http.post.

I have used the ngSmoothScroll callback functions for before and after and in IE11 both work fine and log out what they're supposed to, the scrolling just doesn't work.

Note: this seems to work fine when using directives

Cheers,
Matt

Page is not scrolling to top when refreshed

when I am going to some specific div with smoothscroll and then when I reload the page the page stays there itself.

Does not work with iOS

Use injected arguments instead of global variables

• Inject $window and $document into factory and use them instead of global window and document
• Inject factory into directives and use it instead of global function
• Inject $timeout and use it instead of setTimeout