It might be something only programmers can feel annoyed about but quite often when a scroll animation is running I'd like to cancel it and scroll the other way around.

A simple but effective method that should work in all modern browsers is to stop the smooth-scroll when the wheel or touchstart event is triggered.

Semi-real code(could be written more compact):

var cancelEvents  = ['wheel', 'touchstart'];
var userstopEvent = new Event('smoothscroll_userstop');

function applyEventFunctionToAll(func) {
	var i;
	for (i=0; i<cancelEvents.length;i++) {
		func('on' + cancelEvents[i]);
	}
}

function userStopAnimateScroll() {
	window.dispatchEvent(userstopEvent);
	stopAnimateScroll();
	applyEventFunctionToAll(removeCancelListener);
}

function removeCancelListener(eventName) {
	window.removeEventListener(eventName, userStopAnimateScroll);
}

function addCancelListener(eventName) {
	window.addEventListener(eventName, userStopAnimateScroll);
}

if (allowUserStopAnimationScroll === true) { 
	applyEventFunctionToAll(addCancelListener);
}

My code does not handle anything like scrollers inside anything other than window. Mostly because I have no clue if it should.

And maybe it does not need to be in there core but it would be nice to be able to add this functionality with the "api".

Hello, I'm getting an error when clicking a link with data-scroll applied: Uncaught TypeError: Cannot read property 'hostname' of undefined

Installed via Bower.

Link HTML looks like: Clients

Init looks like: smoothScroll.init({ selector: 'a[href^="#"]' });

Any ideas?

Hey Chris.

Currently, smooth-scroll just works for on-page links. What about adding the possibility to link to different url paths and invoking the scroll animation with the on body load event if a hash (and some additional identifier) is present in the url? This way you could use the same links on multiple pages, e.g. in a navigation.

An example link: /imprint/#.privacy If the link points to another page, is marked with data-scroll and the hash is present in the url, smooth-scroll would invoke the animation and scroll to the element with the id or class "privacy" on page load event. As for a link to an element on the current page, you should still invoke the animation on the click event. The check could be done using window.location.pathname in this case. If you just use the hash without the additional dot, of course, the browser directly jumps to the element with the id "privacy". So I think you need an additional identifier after the hash which is removed, replaced or interpreted as the class identifier to be used to select the element on the page via the querySelector.

What do you think?

I have a header which is positioned as fixed and implemented scrolling (on click on one div, page scrolls to that particular div, offsetted with header height). So all works perfect on desktop, like magic, my page scrolls to that div and header scrolls down together and sits on top of the div (no matter how narrow is it). But when I'm trying to test it from iPhone's Safari it looks like after scroll has been performed my header sticks to the top of the document (like it's position relative) and I can get it back only by refreshing the page.

I would highly appreciate if you share any thoughts around that. Thank you in advance.

There is no smooth scroll in my demo http://nirvana.bplaced.net/smooth-scroll-master/ it directly jumps to the anchor without transition. whats wrong?

Hi, thanks very much for this project. It was looking great immediately. But I have a problem. When I scroll down to the absolute bottom of my page there is a fault behavior. When I click any link there (links to a different position on the same site) there is just a little jump upwards approximately a pixel or so. If I hit the link about 15 times it goes up 1 pixel but then suddenly on the 16th time it scrolls smoothly to the right position. If I first scroll up a little manually it works on the first click. I couldn't figure out what the problem is. Any advice?

For one particular page smooth-scroll has to be initialized twice (once when constructing, and again with init(...)) for having proper scroll targets:

var scroll = new SmoothScroll(scrollSelector, scrollOpts);
                  scroll.init(scrollSelector, scrollOpts);

Otherwise smooth-scroll scrolls too far upwards or downwards or even to the top of page. The incorrect offset also depends on the scroll position, when it already scrolled (incorrectly) to the target, going to that anchor again results in it moving around up and down even to the top of page.

After removing some elements inside the section to be addressed by anchor (ID), it appears that smooth-scroll incorrectly uses some height of elements inside for the (incorrect) offset.

I'm trying to use the plugin with browserify, without much success, though.

The reason, seems to be, that in browserified apps root is not a window, but rather module object.

Here the .addEventListener is always undefined, so plugin in not initialized correctly. My naive try to change to window.addEventListener didn't help, since root used in many other places.

I'm using browserify + umd modules quite a lot, but it's first time I'm having such issue. Maybe there are some workarounds with browserify-shim or something?

Reduced some redundancies such as inside _getDataOptions, no need to return an empty Object when you create one in the same scope, just returns it if there aren't any options.

Few other cleanups such as as ternary operator and reducing all the return; statements, generally just use one and pass whatever you want to it (this is so you can still run the rest of the script, manipulate anything else then return).

Broke out the mustard test into a function, it's getting a bit long for an if () {}. Added String.prototype.trim test as you're also using it and support is flakey in all IE versions.

Put the public methods on an exports Object, to think about what you're exporting rather than passing Private methods to a public Object. It also means less maintenance inside the script when adding/changing functions.

Hi Chris, First of all, love the package! I'm using yarn to manage my packages and I've managed to add it correctly. Import is in ES6 by having import SmoothScroll from 'smooth-scroll' at the top of my component. When I console.log(SmoothScroll); it appears in my console. All working fine!

The moment I run my init var scroll = new SmoothScroll('a[href*="#"]'); I get the following error in my console.

Uncaught TypeError: o.default is not a constructor at new e (index.js:17) at index.js:23 at Array.forEach (<anonymous>) at index.js:22 Any ideas as to why this is happening? Wasn't happening on older versions of your smooth scroll.

Cheers, Dayne

Instead of waiting for the animation to stop before updating the URL, let’s update it right off the bat.

I’m using nav:target to show/hide my main menu on touch devices using only CSS. One of the benefits of this is that as soon as a menu item is tapped, the menu is hidden because the URL changes. Enter smooth-scroll: Because the script waits until the animation stops before updating the URL, the menu stays visible while the script animates the scroll to the selected location, and only then closes. This looks awkward.

This commit changes the order of things, so that the URL is changed immediately, making my menu toggle at the expected time (immediately after tapping a menu item).

Let me know if you would prefer a more robust solution that offers both options. For example: dataURL could have the values before, after, and false, so developers have more control over this behavior. I’d like to take a crack at that if it’s something you’d like to see.

Thanks!

I really like that the polyfills were separated from the core in the latest release. Making a faster loading experience for users of modern browsers is for sure a priority over shipping a more bulky library for the benefit of a small percentage of users on legacy browsers.

I upgraded without adding polyfills, but wanted to take it even a step further -- if a user is on IE, I'd rather have the plugin not run at all than commit to loading polyfills into all browsers or muddying up the code with a runtime conditional polyfill load for IE. Since this plugin is not functional and is purely aesthetic for my use-case, my preference is just to have it not load for legacy browser users - I am using it for id-based jump links, so the browser native functionality still works and it will jump to the section, but without the smooth scroll.

To accomodate this, I added a new option, silent, which is false by default, but if set to true will suppress the error thrown when the browser doesn't support the features required by smooth-scroll. Setting this option to true indicates that you are aware that older browsers will not support smooth-scroll, but are OK with it.

Surely this feature can be dangerous is set without careful consideration of where and how smooth-scroll is being used, which is why it is false by default.

I tested this feature using IE11 and it is working as intended.

I also added a npm script to run the gulp compile, which makes it easier and quicker for contributors to run without having the correct version of gulp installed globally 😁