How to jump to a specific div which placed bottom of page using JavaScript?

Question

I have a div which located at the bottom of the page:

<div id="myDiv"></div>

I want to go to this div after performing of my JS-function. In other words, I want to have my url become myurl#myDiv and to go to my div. But without reloading the page. How this can be done using JavaScript? Unfortunately I have not found a working solution for this issue. I am not using any JS-libraries and frameworks.

Answer 1

To scroll to a particular element, use, scrollIntoView, supported by IE6+ and real browsers:

document.getElementById('myDiv').scrollIntoView();

Check window.location.hash on DOMReady, to see if there is a hash in the URL matching any element in your document.

If there are #myDiv links within the document, you would need to add onclick listeners to them, perform the scroll manually, as per the code above, and return false to avoid following the link to #myDiv.

Demo

Answer 2

Try setting the window's location to that of the ID. The browser will then scroll to that element.

window.location.hash = '#myDiv';