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 https://rjrwebz.com. 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 https://www.rjrwebz.com/rjrwebz#formtop

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.
action="/send-location.html#formtop"
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