Category: JavaScript Answers

Sometimes, we want to get and set the current web page scroll position with JavaScript.

In this article, we’ll look at how to get and set the current web page scroll position with JavaScript.

Get the Current Web Page Scroll Position

We can use the document.documentElement.scrollTop or document.body.scrollTop to get the scroll position of the page.

For instance, we can write:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  document.body.appendChild(p)
}

window.addEventListener('scroll', () => {
  console.log(document.documentElement.scrollTop, document.body.scrollTop)
});

to add elements to a div and listen to the scroll event on the window.

In the event listener, we log the document.documentElement.scrollTop property which should log the scroll position of the page.

As we scroll up or down, document.documentElement.scrollTop should change in value.

Set the Current Web Page Scroll Position

We can also set the document.documentElement.scrollTop property to the scroll position we want.

The position should be a number in pixels.

For instance, we can write:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  document.body.appendChild(p)
}

document.documentElement.scrollTop = document.body.scrollTop = 300;

to set the document.documentElement.scrollTop and the document.body.scrollTop property to 300 pixels down the page.

Now we should see that the page is scrolled down 300 pixels.

Conclusion

We can get and set the scroll position of a page with the document.documentElement.scrollTop property.

Sometimes, we want to scroll back to the top of a scrollable div with JavaScript.

In this article, we’ll look at how to scroll back to the top of a scrollable div with JavaScript.

Use the scroll Method

We can use the scroll method of an element to scroll a scrollable div back to the top.

For instance, if we have the following HTML:

<button>
  scroll to top
</button>
<div>

</div>

And the following CSS:

div {
  height: 300px;
  overflow-y: scroll;
}

Then we can add some content to the div and make the div scroll to the top when we click the button by writing:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

const btn = document.querySelector('button')
btn.addEventListener('click', () => {
  div.scroll({
    top: 0,
    behavior: 'smooth'
  });
});

We get the div with document.querySelector .

Then we add a for loop to add some content to the div with document.createElement to create a p element.

And we call div.appendChild to append the p elements to the div.

Next, we get the button with document.querySelector .

And then we call addEventListener on the button to add a click listener.

In the click listener, we call div.scroll with an object with top set to 0 to scroll to the top.

And behavior is set to 'smooth' to add smooth scrolling.

Now when we click on the scroll to top button, the scrollable div should go back to the top with smooth scrolling motion during scrolling.

Conclusion

We can use the scroll method to scroll a div to the top.

Sometimes, we want to check if a user clicked into an iframe using JavaScript.

In this article, we’ll look at how to detect clicks into an iframe with JavaScript.

Focus on the Main Window Then Add a blur Event Listener to the Window

We can focus on the main window and then add a blur event listener to the window to see which element is activated after the blur event is emitted by the window.

For instance, if we have the following iframe:

<iframe src='https://example.com'>

</iframe>

Then we can focus on on the window and add a blur listener to it by writing:

focus();
const listener = window.addEventListener('blur', () => {
  if (document.activeElement === document.querySelector('iframe')) {
    console.log('clicked on iframe')
  }
  window.removeEventListener('blur', listener);
});

We call focus to focus on the main window.

Then we call window.addEventListener to add a blur event listener to the window.

In the event listener, we check if document.activeElement is the iframe to check if the iframe is the element that we focused on.

If it is, then we log a message.

Then we immediately remove the blur event listener after that.

Now when we click on the iframe, we should see the ‘clicked on iframe’ message logged.

Conclusion

We can detect clicks in an iframe with JavaScript by listening to the blur event on the window.

Sometimes, we want to check if a mouse button is still down after we press it with JavaScript.

In this article, we’ll look at how to check if a mouse button is kept down after we press it with JavaScript.

Listen to the mousedown and mouseup Events

We can listen to the mousedown and mouseup events to check if a mouse button is kept down after we press the mouse button.

For instance, we can write:

let mouseDown = 0;  
window.onmousedown = () => {  
  ++mouseDown;  
  if (mouseDown) {  
    console.log('mouse button down')  
  }  
}  
window.onmouseup = () => {  
  --mouseDown;  
  if (mouseDown) {  
    console.log('mouse button down')  
  }  
}

We set the window.onmousedown and window.onmouseup properties to functions that change the mouseDown count to listen for the mousedown and mouseup events on the whole tab.

If the mousedown event is emitted, we increment mouseDown .

If the mouseup event is emitted, we decrement mouseDown .

mousedown event is emitted when we press the mouse button down.

And mouseup is emitted when we stop pressing the mouse button.

Therefore, if mouseDown is bigger than 0, the mouse button is kept down.

Conclusion

We can check if a mouse button is kept down by listening to the mousedown and mouseup events and mount how many times the mouse button is pressed down or lifted up.

By default, the scroll position of the page is kept after we refresh the page.

Sometimes, we want to force a page to scroll to the top when we refresh it.

In this article, we’ll look at how to force a page to scroll to the top when we refresh the page.

Listen to the beforeunload Event and use the scrollTo Method

To run code when the page refreshes, we can listen to the beforeunload event.

Then in the beforeunload event handler, we call the scrollTo method to scroll to the top of the page when it refreshes.

For instance, if we have the following HTML:

<div>

</div>

Then we can write:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

window.onbeforeunload = () => {
  window.scrollTo(0, 0);
}

to add some elements into the div with the document.createElement method and the appenndChild method.

Then we set the window.onbeforeunload property to a function that calls window.scrollTo with 0 and 0 to scroll to the top.

Now when we refresh the page, we scroll to the top of the page.

Conclusion

We can force a page to scroll to the top when we refresh the page by listening to the beforeunload event with a listener and call scrollTo ibn the event listener.