Linking to a specific section of another page is NOT working (HTML). Going nuts!

Hello everyone, here is my problem : I want to create a “back” link to the portfolio section of my index.html when the user click on a project.
On my index.html I have all my sections and I have named each section with an ID. On the homepage, the link to the portfolio section looks like this:
<a href='index.html#portfolio' data-section='portfolio' >PORTFOLIO</a>

The portfolio section on the index.html begins like this:
<section id='portfolio' class='portfolio-section section' >

And the link that I want to create on each project page looks like this:
<a href='index.html#portfolio'>BACK</a>

It doesn’t work : it returns to the homepage instead of the portfolio section… I would appreciate some help and advices because I am stuck at this point :frowning: Thank you in advance,

G.

Do you have this on codepen, or somewhere public?

I’ve hosted it on netlify here gloriafolidis-ecv(dot)com (since i am new to the forum I cannot share links yet…) how can I share my code with you ?

Lol you just did. I can go on there, and view source. :wink:

So, I think I’m figuring some of what’s going on. It’s not so simple as “hey, show the portfolio section!” because you use transitions to display those sections, and otherwise, they’re hidden.

I think, given that you’re using jQuery, you may need to do a slightly hacky workaround. Here’s the logic you’d need to use:

  1. instead of the hash (the #portfolio bit) on the returning pages going to the section, set the hash to the value of the data-section attribute for the link from your home page.
  2. When the index page has loaded, check the window.location.hash – if it has a value, then use that to select the link. something like
  let theHash = window.location.hash.splice(0, 1) // remove the leading hashmark.
    let myLink = $(\`.front-person-links a[data-section='${theHash}' ]\`); 
  1. given that you now have the link… trigger it: `myLink.trigger(“click”)

What that does is, given the hash value, start the animation sequence that you currently run when the user clicks on the link.

Please note, this wasn’t actually tested against your code, YMMV. (does YMMV even translate in Europe? Sigh)

edit: kinda fun, just to see if it would work, I opened the console in Chrome, and typed this line:

$("nav a[data-section='portfolio']").trigger("click");

… hit return, and the portfolio section opens up. So yeah, if you run that stuff I was suggesting in a document.ready event handler, it should do exactly what you want.

Which browsers are you using? May be it’s the browser.

I try to understand what you’re trying to explain (thanks you btw to take the time, much appreciated), but I am new to jQuery :

  • so first I need to set the hash to the value of the “data-section” attribute for the link, but isn’t it “portfolio” ?
    I see what you mean but I am unable to figure out the way to do it, I am completely lost ! Do you think that you can precise a bit more your reflexion ?

So, for those who come into this and wonder how it resolved, she and I worked through the code in her site, and wrote a function that handled the situation. To recap:

  • Navigate to the home page (http://gloriafolidis-ecv.com/), and click on the portfolio link. A really cool transition and and animation occurs.
  • Pierce down to the sub-pages, with links back to the main page but to a specific element ON that page (for example, a link to /index.html#portfolio should be shifting the focus to that portfolio element.
  • Due to the way the sections are displayed (by javascript manipulation rather than simply by scrolling down to the section with the relevant ID), a link-back wouldn’t work.

So the fix is, on the index page, get the URL hash, find the anchor with the data-section attribute that matches, and trigger its click handler. Fortunately, the OP uses jQuery, so triggering click was painless. Here’s the code we added, and (aside from a few typos on MY part) it worked great:

$(window).on("load", function(){
  // First, make sure we're on the index page. All others can skip this.
  if( window.location.pathname == "/" || window.location.pathname =="/index.html" ){
    // so we're on the index page. Any index processing can happen here.
    //   For our use, we want to get the hash (if we have one) and trim off the leading hash:
    if (window.location.hash) {
      let mySection = window.location.hash.substring(1); // start at the SECOND char to the end

      // now, we want to trigger the proper link:
      $(`a[data-section='${mySection}']`).trigger("click");
    }
  }
}

It’s all a pretty basic series of steps, but it makes possible animations to internally-linked elements that may only be accessible or “triggerable” via js.

to see it happen, go to http://gloriafolidis-ecv.com/ (to see the original page), or to http://gloriafolidis-ecv.com/index.html#portfolio (to see the js-triggered section animation).

1 Like