Solved

Dynamic auto-scroll to anchor based on URL parameter

  • 15 September 2017
  • 3 replies
  • 141 views
C

hey team,

We currently use anchors (buttons with URL target = #lp-pom-block-11, for example) to make it easy for users to jump to different areas of our landing page, such as our “About Us” section.

Our landing page leads people to our registration site (not hosted on Unbounce). When someone clicks “About Us” from that other site, they are taken back to our unbounce page, but we can’t figure out how to set it up so that it automatically scrolls to the appropriate section.

The referring site appends a useful URL parameter (?section=mission). So I get how we would do Dynamic Text Replacement, Dynamic Image replacement, etc. based on that URL parameter. But how can I do Dynamic auto-scroll based on the URL parameter?

Thanks.

icon

Best answer by Justin 18 September 2017, 16:41

View original

3 replies

J

Hey @chris_ddg! I think you have a few feasible options here.

Option 1: URL Parameters

The first is that you can use the #lp-pom-block-11 directly in the URL so that when the landing page is loaded it automatically pops to that section. You can combine this with other URL parameters such as in Dynamic Text Replacement as well.

I’ll show you an example (but please don’t mind the copy; this is a work in progress):

http://www.pixelpaws.ca/
http://www.pixelpaws.ca/#lp-pom-block-84
http://www.pixelpaws.ca/?text=dog&#lp-pom-block-84

The only trouble here is that it doesn’t auto-scroll with the fancy animation that you’re referring to. However, if you’re taking the user from a site and back to your landing page, I don’t know if the ‘scroll’ animation would be appropriate. In my mind, the user would just want the page to load back where they were originally.

Option 2: Focus & Glow

Another option I think you could use is Focus & Glow, which will automatically punt the visitor to wherever the form is on your page.

Option 3: Hire a Developer

You could probably get a bit further here and combine some of these effects together to get exactly what you’re looking for, but then your best bet would be to hire a developer. If you’re looking for recommendations, @Hristian is probably the most capable dev in these forums – but I’m not sure if this is something he currently has the bandwidth for.

C

thanks Justin! Was wondering if there was a way to do you Option 1 without having to update all the links on our own site to include #lp-pom-block-11, but it sounds like that’s not possible. Not a big deal.

Will also look into the other options you mentioned, but we’ll probably just end up appending #lp-pom-block-11 to our links. Cheers,

Chris

J

Sounds good, @chris_ddg! Let us know if you have any other questions. 🙂

Reply


Terms & ConditionsCookie settings