JavaScript Window moveBy() Method

What You’ll Learn

The moveBy() method shifts a browser window by a relative pixel offset. This tutorial covers syntax, positive and negative values, how it differs from moveTo(), popup usage, browser restrictions, five examples, and when not to use it.

Introduction

Every browser window has a position on the screen. The window.moveBy() method nudges that window by a number of pixels—without you needing to know the current coordinates. Pass 100 for x to shift right; pass -50 for y to shift up.

Like close() and focus(), movement APIs are limited on tabs the user opened themselves. Browsers prevent sites from dragging the user’s main window around unexpectedly. Test with popups created via window.open(), especially when the user clicks a button to trigger the move.

Understanding the moveBy() Method

window.moveBy(deltaX, deltaY) adds deltaX to the window’s current horizontal position and deltaY to its vertical position. Both arguments are numbers (pixels). The method returns undefined.

Called on a popup reference, it moves that child window: popupWindow.moveBy(20, 10). This is the pattern you will see in helper-window tutorials and legacy desktop-style web tools.

📝 Syntax

General form of Window.moveBy():

window.moveBy(deltaX, deltaY);
// move a popup reference:
popupWindow.moveBy(20, 10);

Parameters

• deltaX — pixels to move horizontally. Positive moves right; negative moves left.
• deltaY — pixels to move vertically. Positive moves down; negative moves up.

Return value

• undefined.

Related APIs

• window.moveTo(x, y) — set absolute screen position.
• window.open() — create a popup you may reposition.
• window.screenX / window.screenY — read current top-left coordinates.
• window.resizeBy() — change size by a relative delta (also restricted).

Examples Gallery

Use the Try-it links to nudge windows from button clicks. Popups opened with window.open() are the most reliable way to see moveBy() work.

window.moveBy(100, 50);
console.log("moveBy(100, 50) called — may be blocked on main tabs.");

moveBy(100, 50) called — may be blocked on main tabs.

document.getElementById("moveBtn").addEventListener("click", function () {
  window.moveBy(20, 10);
  console.log("Window nudged by (20, 10).");
});

Window nudged by (20, 10).

let popupWindow = null;

document.getElementById("openBtn").onclick = function () {
  popupWindow = window.open("", "MoveDemo", "width=320,height=200,left=200,top=120");
  popupWindow.document.write("<p>I am a movable popup</p>");
};

document.getElementById("movePopupBtn").onclick = function () {
  if (popupWindow && !popupWindow.closed) {
    popupWindow.moveBy(30, 20);
    console.log("Popup moved by (30, 20).");
  }
};

Popup moved by (30, 20).

// Move 40px left and 25px up from current position
window.moveBy(-40, -25);
console.log("moveBy(-40, -25) called");

moveBy(-40, -25) called

<button type="button" id="openBtn">Open popup</button>
<button type="button" data-dx="0" data-dy="-15">Up</button>
<button type="button" data-dx="0" data-dy="15">Down</button>
<button type="button" data-dx="-15" data-dy="0">Left</button>
<button type="button" data-dx="15" data-dy="0">Right</button>

<script>
  let popup = null;
  document.getElementById("openBtn").onclick = () => {
    popup = window.open("", "Nudge", "width=280,height=160");
  };
  document.querySelectorAll("[data-dx]").forEach((btn) => {
    btn.onclick = () => {
      if (popup && !popup.closed) {
        popup.moveBy(Number(btn.dataset.dx), Number(btn.dataset.dy));
      }
    };
  });
</script>

Open popup → click Up/Down/Left/Right → popup shifts 15px per click.

🚀 Common Use Cases

• Popup tool windows — nudge helper panels the user opened from your app.
• Legacy desktop-style UIs — multi-window tutorials and intranet tools.
• Step positioning — fine-tune popup placement after open() when moveTo is overkill.
• Direction controls — arrow buttons that shift a child window incrementally.
• Learning demos — contrast relative moveBy with absolute moveTo.
• Not for responsive layout — use CSS media queries instead of moving the browser window by screen width.

📝 Notes

• Do not auto-move windows on page load—it frustrates users and is usually blocked.
• Moving off-screen can make a popup hard to find; clamp or reset with moveTo when needed.
• Fullscreen and maximized windows may ignore or clamp movement.
• Mobile browsers often lack traditional movable windows; popups may open as tabs.
• moveBy affects the outer window—not elements inside the page (use CSS for those).
• Pair with window.open() features string left and top for initial placement.

💡 Best Practices