Hi,

Are there any options for offset to avoid the fixed header?

Is it possible to scroll specified element inside some container as it possible by setting scrollTop of the container?
For example: https://jsfiddle.net/9exs4Lan/

Register trigger, then change ID to another target. Transition is carried out to previous target.

I think need move target (https://github.com/hsnaydd/moveTo/blob/master/src/moveTo.js#L94) into listener (https://github.com/hsnaydd/moveTo/blob/master/src/moveTo.js#L103).

Though it’s nice to have a slow scroll to the ID on a page, the whole point of such anchors is to keep URL updated with current page fragment ID you’ve just been scrolled to. By removing built-in functionaity you make such links less accessible by users. Buttons and links are two different things even if you could make them look similar with JS.

Please add some History API magic or figure out a way to have ID to be added to URL but prevent page from jumping. Otherwise this script should be considered harmful to web UX.

After encountering problems where the window simply wasn't scrolled, despite a correct call to the move function I started looking around in the code and found a problem in the request animation frame loop. Basically if the duration is too long but the scroll change is too little, the loop is exited after the first iteration because the window was scrolled less than half a pixel, therefore lastPageYOffset and currentPageYOffset remain the same.

A possible solution could be, to simply change this

if (lastPageYOffset && from === to) {
  if (
    lastPageYOffset === currentPageYOffset ||
    change > 0 && lastPageYOffset > currentPageYOffset ||
    change < 0 && lastPageYOffset < currentPageYOffset)
  {
    return options.callback(target);
  }
}

to this

if (currentPageYOffset === to) {
  return options.callback(target);
}

Now this might have unintended consequences I don't realize, but some form of check to see if the window actually scrolled to where it's supposed to could make sense.

cheers

i tried it in this http://jsfiddle.net/5ochqtjy/

but it doesnt scroll the article.
any solution?

I have 2 navs on the page. Mobile and desktop. I want MoveTo in both navs. If I do

<a href="#bazinga" class="js-trigger" data-mt-duration="300">Anchor Link</a>
<a href="#bazinga" class="js-trigger" data-mt-duration="300">Anchor Link 2</a>

Only first smooth scroll is working!

Scrolling about from #A to #Z does not effect the URL in the browser bar, nor does it modify the window.history
If a user presses "back", the URL will change completely, not "back up" to an earlier internal #link.

Hi, can you add an "step" option (like jQuery.animate) in the library to re-calculate the final position if there are lazy loading images in the page?

Eg:

step: function( now, fx ) {
   var newOffset = $target.offset().top;
   if(fx.end !== newOffset)
     fx.end = newOffset;
}

Regards

Clicking on the button in your demo does indeed bring you back to top visually, but the focus remains on the button. The focus should move to wherever the page visually scrolls to instead of staying with the button clicked.

The smooth scroll doesn't seem to work in Firefox.

Here's a demo pen.

https://codepen.io/anon/pen/aGXJzB

Oops. Sorry. Forgot FF version.

60.0.1 (64-bit)

No addons installed.

Run moveTo on Edge will faced with this error:

Object doesn't support property or method 'scroll'
at ./node_modules/moveto/dist/moveTo.js in loop at line 180:7

It because Edge not support Element.scroll. So we need to add this polyfill: https://github.com/idmadj/element-scroll-polyfill

I noticed that if I do second click on link (after I scroll to needed element) MoveTo jumps to Top of the page. Not sure why it's happening without my knowledge. Is this a desired behavior? Can I turn this off?

Great work! I really like this kind of tiny masterpieces, instead of overcomplicated stuff soo common nowadays... This is not an issue at all. Just a few suggestions to get the code even smaller after minification.

1_ cache prototype object:

var proto = MoveTo.prototype;

Before minification:

var proto = MoveTo.prototype:
proto.registerTrigger = function(){ };
proto.move = function(){ };
proto.addEaseFunction = function(){ };

After minification:

var p=MoveTo.prototype:p.registerTrigger=function(){};p.move=function(){};p.addEaseFunction=function(){};

Minification without caching:

MoveTo.prototype.registerTrigger=function(){};MoveTo.prototype.move=function(){};MoveTo.prototype.addEaseFunction=function(){};

2_ save some methods and properties in strings, and later use brackets notation. For example, the getAttribute methods:

Before minification:

var _getAttribute = 'getAttribute':
var attr1 = elem[_getAttribute]('data-attr-1');
var attr1 = elem[_getAttribute]('data-attr-2');
var attr3 = elem[_getAttribute]('data-attr-3');

After minification:

var a='getAttribute',b=e[a]('data-attr-1'),c=e[a]('data-attr-2'),d=e[a]('data-attr-3');

Minification without caching:

var b=e.getAttribute('data-attr-1'),c=e.getAttribute('data-attr-2'),d=e.getAttribute('data-attr-3');

You can "cache" some others objects/properties more... like "forEach"

Yeah... I know that the differences are insignificant, but is a good practice and even more important if you plan to extend some functionality or add more methods to the constructor...

Anyway good work!

I see the window expose at the outside so when I run into nodejs runtime it will crash

easeInQuad: function (t, b, c, d) {
t /= d;
return c * t * t + b;
},
这个会导致如果页面有三个section，会卡在第二个section。

I'm currently including moveto in a project and it appears to work great in development.

However when I attempt a production build with webpack it will throw an error from Uglify:
ERROR in vendor.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [vendor.js:xx,xx]

commenting out the import will allow the build to be successful:
import MoveTo from 'moveto';

Any help appreciated.

In my case, the top margin of the first section is ignored when scroll back to top. I have to use padding instead of margin or wrap the sections in a container div.

NOT WORKING :

<body>
      <section></section>
      <section></section>
      <section></section>
      <button>Back to top</button>
</body>

section {
      margin: 50px 0 0 0;
}

WORKING :

<body>
      <section></section>
      <section></section>
      <section></section>
      <button>Back to top</button>
</body>

section {
      padding: 50px 0 0 0;
}

OR

<body>
      <div class="wrapper">
            <section></section>
            <section></section>
            <section></section>
            <button>Back to top</button>
      </div>
</body>

section {
      margin: 50px 0 0 0;
}