Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Anchor Link on Page1 to Page2 using PHP

HI to all.

I have a question I didn't find an answer to(I'm using PHP):

I have a link on page 1 that should link to the specified anchor ID on page 2.

EXAMPLE:

<a href="/pages/landing.php#contact-wrapper-anchor">Go to Page 2 Anchor</a>

What it does it wants to link to the "contact-wrapper-anchor" on the same page - on Page 1, which does not exist.

Has anyone managed to do it? I'm totally stuck. Stack Overflow isn't helping at all.

4 Answers

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Nejc,

I threw a test case together in Brackets to demonstrate that your code should be working, as long as the pathing was correct.

I created two pages, page1.php and page2.php.

The goal is to have a link in the h1 element of the page1.php document that opens the page2.php document and focuses on the element with the id of "contact-wrapper-anchor", which I've given to the h1 element in the page2.php document.

The code for the two documents are as follows.

page1.php

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Welcome to Page One!</title>

</head>

<body>

    <h1><a href="page2.php#contact-wrapper-anchor">If you like this page, check out page two!</a></h1>

</body>
</html>

page2.php

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>The Amazing Page Two</title>

</head>

<body>

    <h1>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br>This is a huge block of text!<br></h1>

<h1 id="contact-wrapper-anchor">Great Things Are Brewing!</h1>

</body>
</html>

Both page1.php and page2.php are in the same root directory, so when the text in the h1 element of page1.php is clicked it opens the page2.php document and focuses on the h1 element inside of that document that has the id of "contact-wrapper-anchor".

The first h1 element that contains the massive amount of "This is a huge block of text!<br>" lines was used to ensure that the focus was shifting down the page, which it is.

So, after all of this, we know that your code is set up to work, but it's likely a pathing issue causing your problem.

In the example you provided, you're targeting "/pages/landing.php", so I would start looking there. The functionality you want is easy to achieve, as the example above shows, but it sounds like the parser hasn't been properly told where to look.

Another issue could be that you may have given the "contact-wrapper-anchor" id to more than one element, but it sounds like you've already looked at that possibility. It would still be worth checking over one more time though.

Good luck with the project!

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey again Nejc,

Actually, looking over your code again, try to remove the first slash in your anchor href.

Change:

<a href="/pages/landing.php#contact-wrapper-anchor">Go to Page 2 Anchor</a>

to:

<a href="pages/landing.php#contact-wrapper-anchor">Go to Page 2 Anchor</a>

Good luck!

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

HI Daniel.

Thanks for replying.

I'm doing it the same as you do but it doesn't work.

I have no double IDs and the page should be seen and connected to to the ID. Somehow it doesn't work.

Can't figure it out. Strange it doesn't want to redirect to the ID.

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey again Nejc,

It's difficult to see where you're going wrong without the actual code, but when you click the link, does it stay on the page containing the link? Or do you get an error page?

Also, are you doing this in Workspaces, or is this a personal project/being done in a text editor?

Lastly, does the url change when you hit the link? If it does, does the new page load displaying the top of the page as normal? If so, then you may have a typo in the id or the reference to the id.

I'm here if you're still looking for help :D

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Nejc,

Just to be certain, did you remove the first slash from your href value as listed above?

It could just be that a single slash is causing all the issues.

Good luck!

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

the anchor ID is added to the current URL. but it show to the 2nd page with the added ID.

I'm baffled.

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey again Nejc,

Are you working out of Workspaces, or are you using a different environment?

It would be a lot easier to help if we could see your code at this point. The fix is likely really easy, but we're losing a lot in the communication it seems :D

Daniel Gauthier
Daniel Gauthier
15,000 Points

Adding this in case you're uncertain of how to share a snapshot (assuming you're working in Workspaces):

How to Post Code on the Forums

There are two ways to share your code on the forums here, excluding using external tools from outside of Treehouse.

Method One

The first method is to use a series of three ` (backticks, located at the top left of the keyboard) without any spaces on one line, paste all of your code starting on the second line, then closing the code block with a second series of three backticks. Take a peek at the link for the "Markdown Cheatsheet" located above the "Post Answer" button anytime you're about to post a comment or answer. Using this method, the code will look like this:

```css
(code here)
```

Method 2

The second method is a little more convoluted, but it lets us look at your entire project and make our own copy to try fixing issues. I'll order the steps since it can be a little confusing the first time around:

  1. Open the workspace you're having trouble with.

  2. On the menu bar located to the left of the "Preview Workspace" button is the "Snapshot Workspace" (camera icon), click that.

  3. A popout will appear with another button that says "Take Snapshot", click that.

  4. It should create a new snapshot, which will appear beneath the "Take Snapshot" button in the popout. Click the snapshot you want to share.

  5. The snapshot should open a new browser tab. Highlight the url in the snapshot's browser tab (it should look like this: https://w.trhou.se/duckyj79b1i0 ).

  6. Create your forum post and paste the snapshot's url into the post. Other Treehouse users will be able to open the snapshot, then 'fork' a new copy to check out.

Keep in mind that you can only ever have five snapshots, but you can delete them by hovering over the snapshot located below the "Take Snapshot" button in the popout and click the trash bin icon.

Good luck!

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi.

Thanks to Daniel for taking the time but I found the problem after rechecking.

My problem was that I was including two files where only one was necessary. One was with the link and the other had the same link and some additional tags.

A big mistype and forgetting that I templated the whole thing in the other file...

Thanks again for all the help!

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Nejc,

Glad that you got it all worked out :D

Good luck!