deleted 1 character in body

Source Link

edited Aug 9, 2023 at 11:09

8k
3
46
57

2018-2020now Pure JavaScript:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand, it does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on CodePen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on CodePen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method.

2018-2020 Pure JavaScript:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand, it does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on CodePen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on CodePen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method.

2018-now Pure JavaScript:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand, it does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on CodePen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on CodePen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method.

Active reading [<https://en.wikipedia.org/wiki/CodePen>]. Expanded.

Source Link

edited Jul 28, 2021 at 21:34

Peter Mortensen

31.4k
22
109
132

2018-2020 Pure jsJavaScript:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand he, it does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on CodepenCodePen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on CodepenCodePen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method.

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand he does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on Codepen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on Codepen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method

2018-2020 Pure JavaScript:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand, it does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on CodePen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on CodePen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method.

correct typos according to CodePen code (prevents overriding defaults)

Source Link

edited Jun 6, 2020 at 9:41

gaborous

16.2k
11
89
104

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand he does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const toptopPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on Codepen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on Codepen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand he does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const top = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on Codepen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on Codepen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

But as far as I understand he does not have such good support as the options below.

Learn more about the method.

If it is necessary that the element is in the top:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Demonstration example on Codepen

If you want the element to be in the center:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Demonstration example on Codepen

Support:

They write that scroll is the same method as scrollTo, but support shows better in scrollTo.

More about the method

edited body

Source Link

edited Dec 23, 2019 at 8:34

Илья Зелень

8k
3
46
57

Loading

added 21 characters in body

Source Link

edited Oct 4, 2019 at 11:13

Илья Зелень

8k
3
46
57

Loading

added 5 characters in body

Source Link

edited Sep 25, 2019 at 17:41

Илья Зелень

8k
3
46
57

Loading

added 584 characters in body

Source Link

edited Sep 2, 2018 at 16:13

Илья Зелень

8k
3
46
57

Loading

Source Link

created Sep 2, 2018 at 15:40

Илья Зелень

8k
3
46
57

Loading

Collectives™ on Stack Overflow

Return to Answer

2018-2020now Pure JavaScript:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-2020 Pure JavaScript:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-now Pure JavaScript:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-2020 Pure jsJavaScript:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-2020 Pure JavaScript:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center:

2018-2020 Pure js:

There is a very convenient way to scroll to the element:

If it is necessary that the element is in the top:

If you want the element to be in the center: