Streaming live at 10am (PST)

Website refresh with hero section showing on page load


#1

I'm currently working on a pilot website. If this works out well, I'm thinking about signing up for a plan.

I'm experiencing some issues at the moment though, which I'd like to resolve first. But I think it's also good to test the support of the service now. Here's my issue:

When I try to refresh my website and I scrolled down to one of my sections, it always jumps back to my hero section, instead of directly showing me the section that was shown before refreshing the site.

Here's my shared and preview link:

SHARED: https://preview.webflow.com/preview/wwweb-9c7def?preview=cfef51527322a4a8e0d950c2028bdac2

PREVIEW: http://wwweb-9c7def.webflow.io/

To reproduce this issue:

  1. go to my preview website
  2. scroll down to leistungen
  3. refresh website

Thanks for your help!

Best,
Jens


#2

Check out my video use case. It seems to be refreshing at the section and not the hero.

I'm using Google Chrome.


#3

Hey @jensvahle!

Thanks for reaching out and welcome to Webflow :slight_smile:

If you try the same approach on the published website, it will scroll to the section below easily. When it comes to Designer, notice that the canvas (place where you design your website) is an iframe, while the rest of the Designer is outside of it.

Browser can only scroll to the place from where it was refreshed for the top content, which is directly inside of the body element. When it comes to iframes, browser doesn't count the position of it for scrolling. See few examples I made for you :slight_smile:

Example 1

http://refresh-and-scrolling.webflow.io/

section
  container
    heading
section
  container
    heading

Example 2

http://refresh-and-scrolling.webflow.io/example-2

section
  container
    heading
    div <!-- fixed width/height and scroll overflow -->
      richtext
section
  container
    heading
    div <!-- fixed width/height and scroll overflow -->
      richtext

On this example you can see that if you scroll within the overflown div itself and refresh it doesn't save your scrolling position for the div.

Example 3

http://refresh-and-scrolling.webflow.io/example-3

section
  container
    heading
    iframe
section
  container
    heading
    iframe

In this example there are iframes used. It kind of mimics the way Designer works. If you scroll within those and then refresh, you will see they jump back to the top.


I also wanted to ask about the reason for refreshing Designer. Is there something we could help with?

Let me know if that helps :slight_smile: Enjoy using Webflow!

Cheers,
Bart


#4

Hi moofawsaw, Hi Bart,

for me it doesn't work on the published site, please check out my video:


#5

It's doing that because you are technically navigating to a page with an anchor tag appended to the URL, as if you had clicked on a link. In this case, there is a scroll animation associated with clicking on that link. Is it really a "problem" that the page does this?

This is the way any page would work if you navigated to it with an anchor tag appended to the URL, because the page itself begins loading before the browser knows where the anchor tag is within the code, so it will load at the top then flash to the anchor once it finds it.


#6

Hmm, would it be possible to start at the hero section again after refreshing? It's not really smooth experience.


#7

I don't have time right now to fully test it, but I believe if you add an interaction to the body element which, onload, turns it to display:none; and then immediately to display:block; or whatever your usual body display type is, that should force the browser to load the page at the top every time it's loaded whether it is initially, or refreshed.


#8


#9

if you're navigating to a section by clicking on a link, you're appending #section kind of param to the URL. You can try adding following script in Custom Code, before </body> tag for your entire project or specific page. Here's how.


See in action: http://refresh-and-scrolling.webflow.io/example-4#section-2

<script>
  var currentUrl = window.location.href;
  if (currentUrl.indexOf('#') > 0) {
    window.location.replace(currentUrl.substr(0, currentUrl.indexOf('#')));
  }
</script>

This code is checking on loading up if your url has a # in it and if so it trims it and reloads page with new one.

I don't think the experience isn't smooth when it's scrolling nicely on page load, but if you really need that change, try script above.


Please note we're not usually providing custom code solutions and we're not responsible for such. If you're using Custom Code you are aware of the code and use it at your own risk.
Read more at our Statement of Support.



#10

Thanks Bart, I will use the code!


#11

Thanks Cricitem, this didn't work, but I will try it with the piece of code.


#12

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