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).
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).
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
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”
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:
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).
Cheers,
Bob
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;”
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.
Cheers,
Bob
