Navigating to a specific div from an external link-CodePudding

I'm trying to make a certain link that redirects the user to a certain div within the page. (e.g https://blabla.github.io/my-website)

My code is pretty simple and it works locally:

<div id='projects'>
      <h1 className='pt-32 text-5xl pb-10 text-center font-gloria italic'>
        Some of my projects <span className='text-xs '>(so far...)</span>
      </h1>
</div>

when I try to link to : https://blabla.github.io/my-website#projects It does redirects me the page yet not to the specific div I need.

would appreciate the help!

CodePudding user response：

To navigate to a specific div on a page from an external link, you can use a technique called "fragment linking." This involves adding a # followed by the id of the div you want to link to, at the end of the URL. For example, if the URL of the page is https://www.example.com and the id of the div you want to link to is my-div, the link would be https://www.example.com#my-div. When someone clicks on this link, they will be taken to the page and automatically scrolled to the div with the id of my-div.

<html>
  <body>
    <div id="my-div">
      This is the div I want to link to.
    </div>
  </body>
</html>

To create a link to this div, you could use the following HTML:

<a href="https://www.example.com#my-div">Click here to go to the div on the page</a>

When someone clicks on this link, they will be taken to the page and automatically scrolled to the div with the id of my-div.

CodePudding user response：

It sounds like you're having an issue with your website's anchor links. In order for anchor links to work properly, you'll need to make sure that you're using the correct syntax for the link and for the anchor itself.

Here are a few tips that might help you get your anchor links working properly:

Make sure that you're using the # character to define the anchor in the link, like this: https://blabla.github.io/my-website#projects. This tells the browser that you want to link to a specific anchor on the page.
Make sure that the anchor itself is defined using the id attribute of an HTML element, like this: <div id='projects'>...</div>. This tells the browser which element on the page should be the target of the anchor link.
Make sure that the value of the id attribute in the anchor element matches the anchor name in the link exactly, including the # character. In this case, the anchor name in the link is #projects, so the id attribute in the anchor element should be id='projects'.
Make sure the id element projects is only once defined in the page.
If you're still having trouble, try using the full URL for the anchor link, including the http or https protocol and the domain name, like this: http://blabla.github.io/my-website#projects. This can sometimes help the browser find the correct anchor on the page.

I hope this helps!