Scroll to Section + Interaction Bug on Safari and Firefox

Design help Animations & Interactions
1

Hi Everyone,

In this project, the Logo on the Hero section of the Home Page is a link to scroll to a section below (#about).

The functionality scrolls to the #about section specified properly on Chrome, but scrolls just short of the section in Safari, Firefox, and the Preview/Editor.

It looks as if it is scrolling short the pixel height of the navigation bar, which has an Interaction set to make it appear once the scroll is complete.

My guess is Safari, Firefox, and the Preview/Editor do not take into account this interaction when calculating the scroll.

Any ideas how to make the scroll look as it does on Chrome across all browsers?

Thanks,
Will

Here is my public share link: LINK
Here is a live version: LINK

2

Paste this in Page Settings > Custom Code > Footer Code:

<script>
Webflow.push(function() {
  $('.hero-logo-container').click(function() {
    $('html,body').stop().animate({
      scrollTop: $('.home-section').position().top + 10
    }, 1000);
    return false;
  });
});
</script>

Works on published site only.

3

Hi @samliew thanks for the response.

It still seems to stop short of the section, and the interaction that brings the nav into visibility doesn’t activate.

Any other ideas?

Thanks again,
Will

4

Try adding an additional + 10 to the calculation (code above edited).

6

Works perfectly. Thanks so much for the help.

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.