Cannot get a named anchor to work in CSS

Need Help

I’m trying to use CSS to create a named anchor on my homepage on I want the “Send Email” button on my “Getting Started…” form to scroll the page to the top of the column containing the form so the confirmation message is shown - but it goes to the top of the page like a refresh and thus the user will not see the confirmation message.
Would someone please visit my site to review the homepage’s “Getting Started…” form and let me know what I’m doing wrong. I want the button, when clicked, to scoll the page to the top of the column and not the top of the page (i.e., no refresh).

you have to use ID, not name.

give the element you want to scroll to the id="gohere"

and then put #gohere in the href.

looking at ur page, it all looks like it should work, but ur putting the id on a div rather than a text element (don’t know why that would make any diff, but).

try this instead

<div style="font-style: italic; font-family: 'Lato', sans-serif; font-size: 18px;"><p id="formtop" >Step 1.</p></div>

oh, i see the problem (i think)… your action on the submit button is NULL which will take you to the top of the page, when what you really want is a redirect to

also not sure what formaction="" is doing for you, if anything… the action up in the form element is what determines the form behavior.

i’m not sure but i think having the form input inside of an anchor might be working double duty… i don’t think you want the anchor.

Hi @randyrie
I agree with @droidgoo that you likely need to set some type of action for the form. You don’t need to use a formaction on the button unless you want some type of alternate redirect. Also, according to the HTML5 standards, you shouldn’t wrap any interactive element (like a button) in a link.

Depending on browser it could give some unexpected behavior, plus, it might throw off your page ranking and you don’t need it. Instead, add the anchor to your form action.
Hope this helps

@RobM AND @droidgoo

Thanks for responding. I’ve resolved the problem. When I took a closer look, I noticed I placed the ID in the wrong div tag. ARGH!

I noticed you could send an empty email - put ‘required’ into input type to stop spambots.
input required type=“text” name=“FullName” id=“FullName” placeholder=“Full Name”

1 Like

I’m trying to figure out how to get a scrolling row to stop at a certain point when I hit a button in my navbar that links to a named anchor in the row’s first column (I’ve anchored to the FaithCentre logo in the white box).

this is the button on my navbar:

Here is where I want the scrolling row to stop/open… with spacing between the column top and the browser’s top:

But here is where it opens… the column is up too far:

I’ve tried placing the column higher, above the row, but this didn’t do the trick.How do I set this ‘correctly’ in PineGrow?

Hi @randyrie,
So there are two CSS properties, scroll-padding-top and scroll-margin-top that may work for you. They aren’t supported by IE and actually, for Chrome there is a bug, so you have to use the short hand form: scroll-padding: a b c d; Where a is the top value, b the right value, c the left value, and d the bottom value.
Using :target:before can be a bit problematic. The only other solution is to use JavaScript (I think).

Thanks again @RobM for your quick response.

I assume the scroll-margin-top property should be added to the inline style for the row and not the anchor I want affected? Like: style=“scroll-margin-top: 200px;”

Am I on track?

Hi @randyrie,
You would add it to the element that has the id that you are targeting for the scroll. Not sure what that element is. Then just set the top to be large enough to include what you need. You don’t have to use px, any unit will work.