window.scrollTo with options not working on Microsoft Edge

scrollto not working
window.scrollto id
element.scrollto polyfill
window.scrolltop javascript
window scrollto not working in firefox
object doesn't support property or method 'scrollto'
window scrollto safari
window scrollto animate

I have a strange issue which I can only replicate on Microsoft browsers (Edge and IE11 tested).

<style>
    body {
        height: 5000px;
        width: 5000px;
    }
</style>
<p>Click the button to scroll the document window to 1000 pixels.</p>
<button onclick="scrollWin()">Click me to scroll!</button>
<script>
    function scrollWin() {
        window.scrollTo({
            left: 1000, 
            top: 1000,
            behavior:"smooth"
        });
    }
</script>

Maybe not a true answer in the sense of the word, but I have solved this problem by using this helpful polyfill: https://github.com/iamdustan/smoothscroll which works really well across all browsers.

Example page for pollyfill: http://iamdustan.com/smoothscroll/

Many thanks to the author.

Window.scrollTo(), window.scrollto(0 0) not working element.scrollto polyfill object doesn't support property or method 'scrollto' window.scrollto id window.scrollto smooth scrolltop  This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post . But I want a smooth scroll effect. US English - behaviour: 'smooth' will get you nowhere – A2D Sep 19 '18 at 0:55. Now you can use just window.scrollTo ( { top: 0, behavior

As mentioned before, the Scroll Behavior specification has only been implemented in Chrome, Firefox and Opera.

Here's a one-liner to detect support for the behavior property in ScrollOptions:

const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;

And here's a simple implementation for cross-browser smooth scrolling: https://nicegist.github.io/d210786daa23fd57db59634dd231f341

window.scrollTo with options not working on Microsoft Edge, Don't remember having the problem before the April update. www.​thewindowsclub.com/reset-microsoft-edge-browser-to-default-settings-in-​windows-10/amp Click Driver tab. Click Rollback driver if the option is available​. If not I use two finger scroll and scrolling down a web page the page wants to​  window.scrollTo with options not working on Microsoft Edge. I have a strange issue which I can only replicate on Microsoft browsers (Edge and IE11 tested). This code correctly scrolls the window 1000px to the left and down, with a smooth behaviour in Chrome and Firefox. However, on Edge and IE, it does not move at all.

You can detect support for the behavior option in scrollTo using this snippet:

function testSupportsSmoothScroll () {
  var supports = false
  try {
    var div = document.createElement('div')
    div.scrollTo({
      top: 0,
      get behavior () {
        supports = true
        return 'smooth'
      }
    })
  } catch (err) {}
  return supports
}

Tested in Chrome, Firefox, Safari, and Edge, and seems to work correctly. If supports is false, you fall back to a polyfill.

Scrolling problems with Edge, Animate controls and element inside windows; Slide open combo boxes; Smooth​-scroll list boxes using a middle-click jogwheel from you rmousedriver, or even programmatically, will work. This bug exists on Microsoft Edge 44.18362.267.0, Microsoft Browser crashes or stops working; /; Windows 10  I am building a web app, and part of that web app needs to scroll to the top when an action is performed. This is handled using window.scrollTo(0,0) which works perfectly until I add some CSS styling below (which I require for this project). Has anybody got any idea why the CSS below would stop window.scrollTo(0,0) working?

Indeed, they don't support this variant, MDN articles should be updated.

One way to polyfill this method is to run the scroll method in a requestAnimationFrame powered loop. Nothing too fancy here.

The main problem that arises is how to detect when this variant is not supported. actually @nlawson's answer tackles this problem perfectly...

For this, we can use the fact that a call to Window#scroll will fire a ScrollEvent if the viewPort actually did scroll. This means we can set up an asynchronous test that will:

  1. Attach an event handler to the ScrollEvent,
  2. Call a first time scroll(left , top) variant to be sure the Event will fire,
  3. Overwrite this call with a second one using the options variant.
  4. In the event handler, if we aren't at the correct scroll position, this means we need to attach our polyfill.

So the caveat of this test is that it is an asynchronous test. But since you need to actually wait for the document has loaded before calling this method, I guess in 99% of cases it will be ok.

Now to less burden the main doc, and since it is already an asynchronous test, we can even wrap this test inside an iframe, which gives us something like:

/* Polyfills the Window#scroll(options) & Window#scrollTo(options) */
(function ScrollPolyfill() {

  // The asynchronous tester

  // wrapped in an iframe (will not work in SO's StackSnippet®)
  var iframe = document.createElement('iframe');
  iframe.onload = function() {
    var win = iframe.contentWindow;
    // listen for a scroll event
    win.addEventListener('scroll', function handler(e){
      // when the scroll event fires, check that we did move
      if(win.pageXOffset < 99) { // !== 0 should be enough, but better be safe
        attachPolyfill();
      }
      // cleanup
      document.body.removeChild(iframe);      
    });
    // set up our document so we can scroll
    var body = win.document.body;
    body.style.width = body.style.height = '1000px';

    win.scrollTo(10, 0); // force the event
    win.scrollTo({left:100, behavior:'instant'}); // the one we actually test
  };
  // prepare our frame
  iframe.src = "about:blank";
  iframe.setAttribute('width', 1);
  iframe.setAttribute('height', 1);
  iframe.setAttribute('style', 'position:absolute;z-index:-1');
  iframe.onerror = function() {
    console.error('failed to load the frame, try in jsfiddle');
  };
  document.body.appendChild(iframe);

  // The Polyfill

  function attachPolyfill() {
    var original = window.scroll, // keep the original method around
      animating = false, // will keep our timer's id
      dx = 0,
      dy = 0,
      target = null;

    // override our methods
    window.scrollTo = window.scroll = function polyfilledScroll(user_opts) {
      // if we are already smooth scrolling, we need to stop the previous one
      // whatever the current arguments are
      if(animating) {
        clearAnimationFrame(animating);
      }

      // not the object syntax, use the default
      if(arguments.length === 2) {
        return original.apply(this, arguments);
      }
      if(!user_opts || typeof user_opts !== 'object') {
        throw new TypeError("value can't be converted to a dictionnary");
      }

      // create a clone to not mess the passed object
      // and set missing entries
      var opts = {
        left: ('left' in user_opts) ? user_opts.left : window.pageXOffset,
        top:  ('top' in user_opts) ? user_opts.top : window.pageYOffset,
        behavior: ('behavior' in user_opts) ? user_opts.behavior : 'auto',
      };
      if(opts.behavior !== 'instant' && opts.behavior !== 'smooth') {
        // parse 'auto' based on CSS computed value of 'smooth-behavior' property
        // But note that if the browser doesn't support this variant
        // There are good chances it doesn't support the CSS property either...
        opts.behavior = window.getComputedStyle(document.scrollingElement || document.body)
            .getPropertyValue('scroll-behavior') === 'smooth' ?
                'smooth' : 'instant';
      }
      if(opts.behavior === 'instant') {
        // not smooth, just default to the original after parsing the oject
        return original.call(this, opts.left, opts.top);
      }

      // update our direction
      dx = (opts.left - window.pageXOffset) || 0;
      dy = (opts.top - window.pageYOffset) || 0;

      // going nowhere
      if(!dx && !dy) {
        return;
      }
      // save passed arguments
      target = opts;
      // save the rAF id
      animating = anim();

    };
    // the animation loop
    function anim() {
      var freq = 16 / 300, // whole anim duration is approximately 300ms @60fps
        posX, poxY;
      if( // we already reached our goal on this axis ?
        (dx <= 0 && window.pageXOffset <= +target.left) ||
        (dx >= 0 && window.pageXOffset >= +target.left) 
      ){
        posX = +target.left;
      }
      else {
        posX = window.pageXOffset + (dx * freq);
      }

      if(
        (dy <= 0 && window.pageYOffset <= +target.top) ||
        (dy >= 0 && window.pageYOffset >= +target.top) 
      ){
        posY = +target.top;
      }
      else {
        posY = window.pageYOffset + (dx * freq);
      }
      // move to the new position
      original.call(window, posX, posY);
      // while we are not ok on both axis
      if(posX !== +target.left || posY !== +target.top) {
        requestAnimationFrame(anim);
      }
      else {
        animating = false;
      }
    }
  }
})();


Sorry for not providing a runable demo inside the answer directly, but StackSnippet®'s over-protected iframes don't allow us to access the content of an inner iframe on IE... So instead, here is a link to a jsfiddle.


Post-scriptum: Now comes to my mind that it might actually be possible to check for support in a synchronous way by checking for the CSS scroll-behavior support, but I'm not sure it really covers all UAs in the history...


Post-Post-scriptum: Using @nlawson's detection we can now have a working snippet ;-)

/* Polyfills the Window#scroll(options) & Window#scrollTo(options) */
(function ScrollPolyfill() {

  // The synchronous tester from @nlawson's answer
  var supports = false
    test_el = document.createElement('div'),
    test_opts = {top:0};
  // ES5 style for IE
  Object.defineProperty(test_opts, 'behavior', {
    get: function() {
      supports = true;
    }
  });
  try {
    test_el.scrollTo(test_opts);
  }catch(e){};
  
  if(!supports) {
    attachPolyfill();
  }

  function attachPolyfill() {
    var original = window.scroll, // keep the original method around
      animating = false, // will keep our timer's id
      dx = 0,
      dy = 0,
      target = null;

    // override our methods
    window.scrollTo = window.scroll = function polyfilledScroll(user_opts) {
      // if we are already smooth scrolling, we need to stop the previous one
      // whatever the current arguments are
      if(animating) {
        clearAnimationFrame(animating);
      }

      // not the object syntax, use the default
      if(arguments.length === 2) {
        return original.apply(this, arguments);
      }
      if(!user_opts || typeof user_opts !== 'object') {
        throw new TypeError("value can't be converted to a dictionnary");
      }

      // create a clone to not mess the passed object
      // and set missing entries
      var opts = {
        left: ('left' in user_opts) ? user_opts.left : window.pageXOffset,
        top:  ('top' in user_opts) ? user_opts.top : window.pageYOffset,
        behavior: ('behavior' in user_opts) ? user_opts.behavior : 'auto',
      };
    if(opts.behavior !== 'instant' && opts.behavior !== 'smooth') {
      // parse 'auto' based on CSS computed value of 'smooth-behavior' property
        // But note that if the browser doesn't support this variant
        // There are good chances it doesn't support the CSS property either...
      opts.behavior = window.getComputedStyle(document.scrollingElement || document.body)
        .getPropertyValue('scroll-behavior') === 'smooth' ?
          'smooth' : 'instant';
    }
    if(opts.behavior === 'instant') {
        // not smooth, just default to the original after parsing the oject
        return original.call(this, opts.left, opts.top);
      }

      // update our direction
      dx = (opts.left - window.pageXOffset) || 0;
      dy = (opts.top - window.pageYOffset) || 0;

      // going nowhere
      if(!dx && !dy) {
        return;
      }
      // save passed arguments
      target = opts;
      // save the rAF id
      animating = anim();

    };
    // the animation loop
    function anim() {
      var freq = 16 / 300, // whole anim duration is approximately 300ms @60fps
        posX, poxY;
      if( // we already reached our goal on this axis ?
        (dx <= 0 && window.pageXOffset <= +target.left) ||
        (dx >= 0 && window.pageXOffset >= +target.left) 
      ){
        posX = +target.left;
      }
      else {
        posX = window.pageXOffset + (dx * freq);
      }

      if(
        (dy <= 0 && window.pageYOffset <= +target.top) ||
        (dy >= 0 && window.pageYOffset >= +target.top) 
      ){
        posY = +target.top;
      }
      else {
        posY = window.pageYOffset + (dx * freq);
      }
      // move to the new position
      original.call(window, posX, posY);
      // while we are not ok on both axis
      if(posX !== +target.left || posY !== +target.top) {
        requestAnimationFrame(anim);
      }
      else {
        animating = false;
      }
    }
  }
})();

// OP's code,
// by the time you click the button, the polyfill should already be set up if needed
function scrollWin() {
  window.scrollTo({
    left: 1000,
    top: 1000,
    behavior: 'smooth'
  });
}
body {
  height: 5000px;
  width: 5000px;
}
<p>Click the button to scroll the document window to 1000 pixels.</p>
<button onclick="scrollWin()">Click me to scroll!</button>

BUG: window.scrollTo to the same place + mousewheel breaks , when opening the edge browser it won't scroll? how to fix. Edge Legacy · All other issues; /; Windows 10 Broken components on the system files related to Microsoft Edge can be one of the factors why this issue occurs. You'll find these options in Settings > Apps > Microsoft Edge > Advanced options. What to do if Microsoft Edge isn't working. Applies to: Microsoft EdgeWindows 10. Here are some solutions to common problems with Microsoft Edge. If you can't open Microsoft Edge, or if it opens briefly and then closes, or if you’re unable to navigate to specific webpages,select from the following to get going again.

Unfortunately, there is no way for that method to work in these two browsers. You can check open issues here and see that they have done nothing on this issue. https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15534521/

edge won't scroll, Which version of Windows 10 is currently installed? See how to Click Advanced options If repair does not work, try performing a Reset. or Se aplica a: Microsoft Edge Windows 10 Edge for Mac Many tools and options in Microsoft Edge are available when you select Settings and more . If you don’t see the options you need, select Settings from there.

Scroll Wheel and vertical scrolling not working in edge, GitHub is home to over 50 million developers working together to scrollTo feature not working anymore, notifications not visible etc #12625 If we use scrollIntoView need to make sure it works on IE 10+ / Edge lazyScrollTo(): time: Specifies the duration of the animation in ms . scrollTo.js#L43 jquery. Publish the report to a workspace. Open the report in Edge browser. When we try to scroll the item list area by dragging the scrollbar, the scroll is not working. It is giving a lot of problem to the Edge user.

scrollTo feature not working anymore, notifications not visible etc , OneDrive Microsoft storage system that lets you easily save, share, and access for opening a document to retrieve it and display it in the document window. Ribbon Display Options button Abutton on the title bar that is used to hide or show the Scroll bar The bar on the right edge (vertical scroll bar) or bottom Scroll bar  The scrollTo () method of the Element interface scrolls to a particular set of coordinates inside a given element. element.scrollTo ( x-coord, y-coord ) element.scrollTo ( options ) x-coord is the pixel along the horizontal axis of the element that you want displayed in the upper left. y-coord is the pixel along the vertical axis of the element

Illustrated Microsoft Office 365 & Word 2016: Intermediate, Methods to change the scroll position of an element. Similar to setting scrollTop & scrollLeft properties, but also allows options to be passed to define the scroll  3. In the right pane of Microsoft Edge in Local Group Policy Editor, double click/tap on the Allow printing policy to edit it. (see screenshot above) 4. Do step 5 (enable) or step 6 (disable) below for what you want. 5. To Enable Printing in Microsoft Edge. A) Select (dot) Not Configured or Enabled, click/tap on OK, and go to step 7 below. (see

Comments
  • window.scrollTo(1000,1000); is the original signatire. I assume Edge and IE did not change that but I might be wrong since MDN says they implemented this
  • according to MDN, the (options) variant has always existed in all browsers
  • Known bug: developer.microsoft.com/en-us/microsoft-edge/platform/issues/…
  • @mplungjan - you are correct, and if I just use window.scrollTo(1000,1000); it does scroll (obviously not smoothly) - but as @Jaromanda X says, MDN suggests the options should be supported by all browsers: developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
  • @JaromandaX that is incorrect. It is for sure a new variant - I cannot get scrollTo(1000,1000) to work in Edge either
  • that's testing for support of the CSS property scrollBehavior. What we want to test is the support for the DOM API. What if someday CSSOM remove this property but DOM keeps that API? Your code will break.
  • Very good. Does the trick. Thank you.
  • Thanks for the super cool answer mate. Works like a charm :)
  • This question makes me feel more and more stupid ;-). Great idea, I don't know how I could miss it, when I use the same every day for testing addEventListener's options...
  • Wouldn't be const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style; much easier? (Tested in Chrome, Firefox, Safari, and Edge, and seems to work correctly.)
  • @eyecatchUp but that's testing for support of the CSS property scrollBehavior. What we want to test is the support for the DOM API. What if someday CSSOM remove this property but DOM keeps that API? Your code will break.
  • Wow, this is an in depth answer for creating a polyfill from scratch. I checked it and it works well, but will stick with the simpler polyfill that avoids iframes linked from my own answer. Thanks for providing this though!
  • @CDK han.... of course someone already did it, bettter... Feel a bit stupid now to have wrote this in the first place without I saw your answer... Note that you can accept your own answer, which is not a bad one. And I see they used the idea I had in my Ps for detection, so it might be reliable enough after all...
  • Thanks @deepak - but the main reason I wanted to use scrollTo with the options was for the smooth scroll affect. Appreciate your answer though.
  • @ CDK, I again made a several tests with smooth behavior with Edge. But this behavior is not working. so at present, It looks like this behavior is not supported with Edge.