You want to scroll to an element when a certain event occurs. A common use case is when you want to add a “scroll back to top” button to your website. How do you do this using jQuery?
Let’s say that you have a button with an id
of “scrollBtn” that you want to use to scroll to the header with an id
of “header1” when the button is clicked. Using jQuery, you can get the button and header element, attach a “click” event listener to the button and then use the jQuery animate()
method to scroll the page to the header when the button is clicked:
import $ from 'jquery'; const scrollToBtn = $('#scrollBtn'); const scrollToEl = $('#header1'); scrollToBtn.click(() => { $('html').animate( { scrollTop: scrollToEl.offset().top, }, 800 //speed ); });
The animate()
method takes in four arguments: properties
, duration
, easing
, and complete
. The properties
argument is the only required argument. It’s an object of CSS properties, as well as some non-CSS style properties such as scrollTop
and scrollLeft
, as well as custom properties, and their values that will be animated. The animate()
method will change these properties and animate the transition. The duration
argument is a string or number that determines how long the animation will run in milliseconds. The easing
argument is a string that determines the easing function to use for the animation. The default easing is “swing”, which has a slower transition at the start and end of the animation than in the middle of the animation. The other easing is “linear”, which has a consistent transition speed. You can use other transitions using jQuery plugins such as jQuery UI.
The scrollTop
property of the HTML element is used to set the number of pixels that the page is scrolled vertically. We call the jQuery offSet()
method on the header to get its top
property. This is the distance between the header and the top of the page. This is where we scroll to.
You can also scroll to an element using vanilla JavaScript:
const scrollToBtn = document.getElementById('scrollBtn'); const scrollToEl = document.getElementById('header1'); scrollToBtn.addEventListener('click', () => { scrollToEl.scrollIntoView({ behavior: 'smooth', }); });
The easy-to-read scrollIntoView()
method is used to scroll to an element so that it’s visible. It has an optional argument that can be a boolean or an object. The optional alignTop
argument is a boolean. If set to true
, the top of the element to scroll to will be aligned with the top of the visible area of the scrollable ancestor. This is the default value. If set to false
, the bottom of the element to scroll to will be aligned to the bottom of the visible area of the scrollable ancestor.
The optional scrollIntoViewOptions
argument is an object with the following properties: behavior
, block
, and inline
. The behavior
property defines the transition animation. The value can be auto
or smooth
. The default value is auto
.