How to use offset

[mpetricek]

Hi,

I'm trying to find out how to use offset function. Can you please write me a better explanation or perhaps better documentation?

Thank you!

[zadremal]

Agree with @mpetricek. Would be nice to have an example of using scroll with offset in documentation. For now, You can use custom scroll function:

const scrollWithOffset = (el, offset) => {
  const elementPosition = el.offsetTop - offset;
  window.scroll({
    top: elementPosition,
    left: 0,
    behavior: "smooth"
  });    

   <NavLink
        to="/#link"`
        scroll={el => scrollWithOffset(el, 150)}
    >
     link
    </NavLink>

[readeral]

Agree with @mpetricek. Would be nice to have an example of using scroll with offset in documentation. For now, You can use custom scroll function:

const scrollWithOffset = (el, offset) => {
  const elementPosition = el.offsetTop - offset;
  window.scroll({
    top: elementPosition,
    left: 0,
    behavior: "smooth"
  });    

   <NavLink
        to="/#link"`
        scroll={el => scrollWithOffset(el, 150)}
    >
     link
    </NavLink>

You're missing a close brace after scrollWithOffset

[TheStu]

scroll={el => { el.scrollIntoView(true); window.scrollBy(0, -64) }}

bit hacky but it works as a one-liner. (64 being the height of my header / the amount I want offset).

[pedropcruz]

scroll={el => { el.scrollIntoView(true); window.scrollBy(0, -64) }}

bit hacky but it works as a one-liner. (64 being the height of my header / the amount I want offset).

Yeap this actually works, but if you want to put some animation on scrolling, you dont have it

[Vidit92]

This functions is working for me:

const scrollWithOffset = (el) => {
    const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
    const yOffset = -80; 
    window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' }); 
}

<NavHashLink smooth to='/#link' scroll={el => scrollWithOffset(el)}>
     Link
</NavHashLink>

[SandMoshi]

I prefer @Vidit92's solution because it preserves the smooth scrolling.

Just a note, you can simply use scroll={scrollWithOffset} without explicitly stating the el input to make it more compact.

[crowlKats]

This functions is working for me:

const scrollWidthOffset = (el) => {
    const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
    const yOffset = -80; 
    window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' }); 
}

<NavHashLink smooth to='/#link' scroll={el => scrollWithOffset(el)}>
     Link
</NavHashLink>

this does not work for me

[ghost]

thank you all I was very stressed trying to figure this out for a client was losing my mind. much appreciated.

[sabago]

This functions is working for me:

const scrollWidthOffset = (el) => {
    const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
    const yOffset = -80; 
    window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' }); 
}

<NavHashLink smooth to='/#link' scroll={el => scrollWithOffset(el)}>
     Link
</NavHashLink>

this does not work for me

I was in the same boat until I ran "npm run build" and restarted localhost. Hope this helps others having the same issue. Works for me! Thanks for posting!

[rafgraph]

Added a section to the readme with a link to this thread. This seems to be a common question, so if anyone would like to create a formal doc that explains how to scroll with offset, PRs are welcome.

[matude]

This functions is working for me:

const scrollWidthOffset = (el) => {
    const yCoordinate = el.getBoundingClientRect().top + window.pageYOffset;
    const yOffset = -80; 
    window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' }); 
}

<NavHashLink smooth to='/#link' scroll={el => scrollWithOffset(el)}>
     Link
</NavHashLink>

this does not work for me

There's a typo: scrollWidthOffset vs scrollWithOffset . Works if you fix that.

[yuya-tani]

I'm using scrolling of in-page links with this offset.

The question is, if you jump to the link destination of the in-page link with a hash If there is an image on that page, I think that the height of that image cannot be taken into consideration (because the image will be loaded later?). Is there a workaround?

Page A

• Sentence
• Link PageB#section2 * Click

Page B

• Section1
• Sentence
• Sentence
• Image * It will fly to this position
• Sentence
• image
• Section2 * I want to fly here
• Sentence
• Sentence

Best Regard.

[rafgraph]

@yuya-tani the best way is to account for the size of the image on the page before the image is loaded (use css to specify the space that the image will take up). Comments in #84 may help.

[yuya-tani]

Thank you for your quick reply.

Certainly, if the image is fixed, it is better to secure the height first in the component where the image is displayed. It's a good idea.

I saw #84 for reference, but if the height of the image changes dynamically Show loading? There is an answer, Is it possible to start smooth after transitioning and loading?

[ayoubkhan558]

 const scrollWithOffset = (el) => window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 100, behavior: 'smooth' });

 <HashLink smooth scroll={el => scrollWithOffset(el)} to="/new/legal-compliance#TermsConditionsSec" className="nav-link active" aria-current="page" >
      Terms & Conditions
 </HashLink>

[kayleriegerpatton]

The above solutions work, but when I replace pageYOffset with the scrollY alias (pageYOffset is deprecated), oddly it doesn't work.