Sometimes it is required in our website to move the page scroll to any jQuery/DOM element position for a reason like clicking on anchor move the scroll to div element.
Here’s how you can programmatically scroll to any element on the top of the page. If you’re using jQuery then, you don’t need any plugin.
We select both html and body element because the document scroller can be on either and it is hard to determine which to target.
For modern browsers you can get away with $(document.body).
Suppose, you need to click on anchor id “anchor” to move the page scroll to div id “elementID”.
$("#anchor").click(function() {
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 1000);
});
This will scroll the page to #elementID over a period of one second (1,000 milliseconds = 1 second).
Or without animation:
$(window).scrollTop($("#elementID").offset().top);
window.scrollTo(0, $("#elementID").offset().top);
Basically, scrollTop gets the current vertical position of the scroll bar for the first element in the set of matched elements or also set the vertical position of the scroll bar for every matched element.
Read Also: 5 Free jQuery Scroll to top Plugins
You can take this things a little bit further and animate scrolling for all anchors on your page.
People usually stumble onto the 461 visa when they realise there’s no simple way to…
When you run a brick-and-mortar retail store, you encounter an array of customer personalities. From…
In today’s digital era, people look for convenience, transparency, and genuine rewards from their financial…
If you are planning to start a lighting business and looking for a supplier of…
If you are a copywriter or a content marketer, you will second my statement that…
Motorcycle accidents often lead to severe injuries because riders have minimal protection compared to drivers…