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.
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.
Hormonal balance plays a pivotal role in overall well-being, influencing various aspects of health, from…
Dog walking is an excellent way to maintain your furry friend's camaraderie and provides many…
Introduction Businesses understand the diverse requirements of mobile applications, which provide a competitive advantage. There…
The Internet of Things (IoT) has recently changed the world. It links gadgets together and…
NFTs, or Non-Fungible Tokens, are revolutionizing the digital economy. These unique digital assets, authenticated through…
It is safe to say that if you are in need of a good laptop…