Author: John Au-Yeung

To scroll an HTML page to a given anchor with JavaScript, we set the location.hash property.

For instance, we write

const scrollTo = (hash) => {
  location.hash = "#" + hash;
};

to define the scrollTo function.

In it, we set location.hash to the selector for the ID for the element we want to scroll to.

To wait for the end of ‘resize’ event and only then perform an action with JavaScript, we set the window.onresize property to the resize event handler.

For instance, we write

window.onresize = () => {
  console.log("resized");
};

to set window.onresize to a function that’s called when we resize the tab or window.

To show the "Are you sure you want to navigate away from this page?" message when changes committed with JavaScript, we set the window.onbeforeunload property to a function that returns a truthy value.

For instance, we write

window.onbeforeunload = () => {
  return true;
};

to set window.onbeforeunload to a function that returns true to show the "Are you sure you want to navigate away from this page?" message before the tab or window is closed or navigation starts.

To programmatically change the src of an img tag with JavaScript, we set the src property of the img element.

For instance, we write

document.getElementById("imageid").src = "../template/save.png";

to select the img element with getElementById.

Then we set its src property to the path string or URL of the image.