Sometimes, we want to jump to an element with any ID using JavaScript.
In this article, I will show you how to scroll to any element using JavaScript.
Use location.href and history.replaceState
We can use the location.href attribute to get the URL and omit the hashtag # part. For example: https://itzone/u/Clarence161095#fullname then location.href will drop #fullname and just get https://itzone/u/Clarence161095 .
We can then append an arbitrary hashtag # to it.
For example, we have the following HTML code:
1 2 3 4 5 6 7 8 9 10 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token punctuation">></span></span> jump <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">'</span> a <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus dignissim lacus, ac ullamcorper ex aliquam vel. Donec nec luctus augue, sit amet porttitor diam. Ut sit amet mi ac risus congue ultricies. Donec et condimentum nisi, sit amet consequat felis. Nam velit nibh, blandit non nunc eget, ullamcorper suscipit ex. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">'</span> b <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> Phasellus faucibus fringilla ullamcorper. Vivamus gravida urna vel odio rutrum rutrum. Vivamus pretium, orci eget cursus tempus, quam elit rutrum est, vel fermentum sapien odio sit amet velit. Etiam cursus pulvinar massa, non maximus dolor vestibulum id. Morbi mi mauris, iaculis ac sem a, porta vehicula risus. Curabitur tincidunt sollicitudin sapien, ac tristique ligula ullamcorper eget. Donec tincidunt orci non ligula auctor ullamcorper. Aliquam mattis elit mauris, at posuere nulla lobortis id. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> |
Then we can add a button to scroll down div with the ID of b on click:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> <span class="token function-variable function">jump</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">h</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> url <span class="token operator">=</span> location <span class="token punctuation">.</span> href <span class="token punctuation">;</span> location <span class="token punctuation">.</span> href <span class="token operator">=</span> <span class="token string">"#"</span> <span class="token operator">+</span> h <span class="token punctuation">;</span> history <span class="token punctuation">.</span> <span class="token function">replaceState</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> <span class="token keyword">null</span> <span class="token punctuation">,</span> url <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> button <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">'button'</span> <span class="token punctuation">)</span> button <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">'click'</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">jump</span> <span class="token punctuation">(</span> <span class="token string">'b'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
We have a jump function with the h parameter being the ID of the element we want to scroll to.
Next, we get the current URL with location.href .
Then we add hashtag # with ID h to it to jump to the element with ID h .
And then we call history.replaceState with url as the 3rd argument to replace the URL with hashtag # with the original URL.
Next, we use document.querySelector to get the part from button .
And then we call addEventListener with the 'click' event to add the click listener .
The 2nd argument is a callback function that calls jump and passes 'b' to scroll to div with ID b .
Summary
We can use the location.href attribute to get the URL without hashtag # .
Then we append hashtag # to it.
And then we can remove hashtag # from the URL in the URL bar using history.replaceState .
Roundup
As always, I hope you enjoyed this article and learned something new.
Thank you and see you in the next posts!
If you find this blog interesting, please give me a like and subscribe to support me. Thank you.