Certainly,
if you want to use `window.scrollTo` or equivalent methods to scroll the page,
here are some examples:
1. **Using `window.scrollTo` with
Coordinates**:
```tsx
const
scrollToPosition = (yPosition: number) => {
window.scrollTo({ top: yPosition, behavior:
'smooth' });
};
// Example usage
scrollToPosition(500);
// Scroll to y position 500
```
In this
example, `window.scrollTo` is used to scroll to a specific y-position on the
page. The `behavior: 'smooth'` option provides smooth scrolling.
2. **Using Element's `scrollIntoView` Method**:
```tsx
const
scrollToElement = (elementId: string) => {
const element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({ behavior:
'smooth' });
}
};
// Example usage
scrollToElement('myTargetElement');
// Scroll to element with id "myTargetElement"
```
In this
example, the `scrollIntoView` method is used on an HTML element with a
specified ID. The element will be scrolled into view with smooth scrolling.
3. **Using `scrollTo` or `scrollBy` on Specific
Element**:
```tsx
const
scrollToElement = (elementId: string, yOffset: number = 0) => {
const element =
document.getElementById(elementId);
if (element) {
const yPosition =
element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({ top: yPosition,
behavior: 'smooth' });
}
};
// Example
usage
scrollToElement('myTargetElement',
-100); // Scroll to element with id "myTargetElement" with a yOffset
of -100 pixels
```
In this
example, `getBoundingClientRect` is used to calculate the y-position of an
element relative to the viewport. You can adjust the yOffset to fine-tune the
scrolling position.
Remember
that smooth scrolling behavior might not work in all browsers or under all
circumstances. It's generally supported in modern browsers. If smooth scrolling
doesn't work as expected, you can use the default behavior by omitting the
`behavior` option or replacing `'smooth'` with `'auto'`.
