In page linking scrolls too far

Community resources Bugs
1

I have seen other forum posts on this subject, but I have not been able to solve my issue. I am linking to section IDs within my page from both menu links and also page links. When I view my site in Webflow preview mode using Chrome, or using Internet Explorer either in preview mode or the live site, the “in-page” linking works properly.

But when I view my live site using Chrome, the scroll links to a position that is just a bit “too far”, thereby obscuring the header of the section. Again, this effect is only observed when viewing the live site using Chrome. Viewing the live site on an IPAD and android phone works properly.

Because this effect is not consistent, I am not sure if it is due to the way I have created the site, or whether there is some Webflow issue? Given that this seems to be a common problem, it is probably me, but I cannot solve it.

You can see my “live” site at http://payloan2.webflow.io/, and in “read-only” design mode at Webflow - salarymate.

Help please?

Thanks

2

Hello,

Check the point 5. in this article : Webflow secrets — Manifest blog, #nocode web design revolution

It will show you how to control the speed to an anchor.

#Control the speed of the smooth scroll to an anchor

When an element has a Unique ID defined, you can set a link to this ID. When clicked, the page will smooth scroll to that ID with an ease-in-out easing mode in 1000ms.

One second is a lot for user interaction. Most click and hover interactions are set between 200 and 350ms. Of course a long scroll can use a little more time but for many, 1second is too much. For others who want to use the smooth scroll as a narrative effect, 1 second is too short.

You can change that speed by using custom attributes.

By the data-scroll-time custom attribute on the tag, it will affect all scroll operations on the page.

By setting it on individual elements that you’re scrolling to, it will affect the smooth scroll to that element spcifically.

So you can set one default scroll speed for all links on the page by adding the custom attribute on the , and override that setting by adding other values directly to the targeted elements.

Here’s how to add a custom attribute. Select your target element or the , go to the Settings Tab and add an attribute and its value in the Custom Attributes section.

The value you can add to the attribute is free. It’s set as a multiplier of the default value (100ms).

Value of the attribute and the corespondant duration

duration of the smooth scroll = value × 1000ms

Here are values you can set for the data-scroll-time attribute, and what they mean in terms of duration:

  • data-scroll-time = 0 will scroll immediately to the element with no delay.
  • data-scroll-time = 0.75 will scroll a little faster than the default (750ms)
  • data-scroll-time = 1 will scroll just as fast as usual (1000ms)
  • data-scroll-time = 1.25 will scroll a little slower than the default (1250ms)
  • data-scroll-time = 2 will scroll twice as slow as usual
  • data-scroll-time = 20 will enable TurtleMode™

1204×884 1.75 MB

You can play with the live example here.

Be careful when you add or try very high values: you won’t be able to concel the scroll, even in the designer. A long scroll will begin, then be interrupted by anothe event (another click) but will continue as soon as the other event finishes.

This trick was posted by @callmevlad in the forum in February 2014.

3

Hi again, I have answered too fast, I read “fast” instead of “far” :smiley:

To me, looking at your published site in Chrome, all the links to anchors in the menu work as expected. Their targets stop right at the bottom of the menu, which is ideal.

Can you tell me where to click to reproduce your bug, exactly, and maybe do a screen capture of the bug?

Thanks

4

Hi
I want to be able to set name attribute of the submit button.
I don’t see any place to do that in the UI.

5

Yes – see the screen shot below:

1366×768 210 KB

You can see that the in-page links scrolls “too far” and obscures the heading. But it ONLY does this from my Chrome on the PC that I primarily use, when I view the live site. It does NOT do this in webflow preview, or when using IE on the same PC. Perhaps it is my Chrome?

Thanks

6

Everythings fine on my end… so maybe some local issues.

Try it in Chrome but in an Incognito window. Also try it in Chrome Canary. Clear all caches and history etc.

7

Tried Chrome incognito and problem does not occur! Thanks …it must be something to do with my Chrome cache? I deleted cache but it did not seem to fix the issue, however it is now working as expected in an incognito tab.

I will keep investigating, but I think you have confirmed that my site is working properly, so thanks Vincent!

8

Smells like cache issue, or issue with a chrome extension, or…

Did you really clean everything, not just the cache? But also logins history etc

9

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