does any one have this code

[Abby]

hello what i want is the code so when a person clicks on a link on my site it jumps to the right place on a page. Example if they click "Contact" it will take them to the part f a page where the contact information is instead of them having to scroll down the page to find it.

Thanks for your help

[sarettah]

if you have an element with an id of contact (<div id="contact"> or somesuch) it would be:

<a href="#contact">Contact</a>

like that

[Zug]

hello what i want is the code so when a person clicks on a link on my site it jumps to the right place on a page. Example if they click "Contact" it will take them to the part f a page where the contact information is instead of them having to scroll down the page to find it.

Thanks for your help

This would be a great post for the User Group area DESIGNERS & CODERS

I believe you are looking for a 'page jump' type of link. Otherwise called a page anchor.

Code: Select all

<a href="https://domain.com/contact-us/index.html#contact">Contact Us</a>

Code: Select all

<a href="#contact">Contact Us</a>

Code: Select all

<div id="contact"></div>

https://www.w3schools.blog/anchor-tag-html
https://brand.wwu.edu/how-create-anchor-jump-link

[sarettah]

we crossed in posting, lol. I was editing mine and expanding it a touch from my original.

oh well, great minds and all that

[Abby]

hello what i want is the code so when a person clicks on a link on my site it jumps to the right place on a page. Example if they click "Contact" it will take them to the part f a page where the contact information is instead of them having to scroll down the page to find it.

Thanks for your help

This would be a great post for the User Group area DESIGNERS & CODERS

I believe you are looking for a 'page jump' type of link. Otherwise called a page anchor.

Code: Select all

<a href="https://domain.com/contact-us/index.html#contact">Contact Us</a>

Code: Select all

<a href="#contact">Contact Us</a>

Code: Select all

<div id="contact"></div>

https://www.w3schools.blog/anchor-tag-html
https://brand.wwu.edu/how-create-anchor-jump-link

Thanks now I get it

[Zug]

https://www.w3schools.blog/anchor-tag-html
https://brand.wwu.edu/how-create-anchor-jump-link

Thanks now I get it

No problem ... Except one for me ...

... great minds and all that

.. If you use a page jump/anchor tag while using a sticky header/fixed/menu/ the height of that sticky is not compensated. So when you hit a page jump with a sticky menu it does not jump to the exact id area.

I would be interested in the css fix for this as I have been looking for it. I know it is a simple little piece of code, but it escapes the se's. It's a padding adjustment for anchor tags .. or something. It's been a while.

An example of my problem is here. The top line of links are all anchored links within the page. But when you hit one, the header height is not added to where the anchor actually goes. It's off by about 50px.

[sarettah]

An example of my problem is here. The top line of links are all anchored links within the page. But when you hit one, the header height is not added to where the anchor actually goes. It's off by about 50px.

a fix would be to make the hrs have an id tag for the section and then make the information divs have a padding-top of like 30px

you have:

<hr class="py-1 text-hr-color">
<div id="about"></div>
<h2 class="display-6 text-light-blue">About Web Model Portal</h2>

That would become:

<hr id="about" class="py-1 text-hr-color">
<div style="padding-top:30px;"></div>
<h2 class="display-6 text-light-blue">About Web Model Portal</h2>

that would make your info divs look a touch different but in testing i thought they looked ok.

or you could like i said make the hrs have the id, get rid of the empty div and change the class "display-6 text-light-blue" have a padding-top of about 30px and get the same effect i think

[BrasSmonkey]

canadian abby??

[Abby]

An example of my problem is here. The top line of links are all anchored links within the page. But when you hit one, the header height is not added to where the anchor actually goes. It's off by about 50px.

a fix would be to make the hrs have an id tag for the section and then make the information divs have a padding-top of like 30px

you have:

<hr class="py-1 text-hr-color">
<div id="about"></div>
<h2 class="display-6 text-light-blue">About Web Model Portal</h2>

That would become:

<hr id="about" class="py-1 text-hr-color">
<div style="padding-top:30px;"></div>
<h2 class="display-6 text-light-blue">About Web Model Portal</h2>

that would make your info divs look a touch different but in testing i thought they looked ok.

or you could like i said make the hrs have the id, get rid of the empty div and change the class "display-6 text-light-blue" have a padding-top of about 30px and get the same effect i think

We were in old Pasadena bar hoping and just Uber’ed back home at 1am it is best I leave the code on my blog alone.

[GlennfromLA]

So many sites set it up wrong and the page jump never works

[BrasSmonkey]

im thinking tabby... i don't know this bitch...

[Zug]

We were in old Pasadena bar hoping and just Uber’ed back home at 1am it is best I leave the code on my blog alone.

Of course ..

Since we're talking about code, 'does any one have this code' ...

A guy is using ChatGPT to turn $100 into a business making 'as much money as possible.' Here are the first 4 steps the AI chatbot gave him.

Thank you Saretta. I'll be looking into that suggested padding method.

[jag]

2 decades ago this was possible before browsers changed things