从不包含该元素的ID的链接跳转到另一个页面上的元素

Question

Pre-requisite knowledge:

In my website's footer, there are links that redirect user to the website's company page, say www.example.com/company.html#first .

Clicking this link would trigger the default browser behavior ie it will redirect to www.example.com/company.html#first and bring into view the div with id = "first".

But in my company.html's dom, there is no div with id = "first" (I have got my reasons due to which I can't provide the id to the concerned div but that's a separate issue). Moreover, I am using the url's hash in some functionality due to which I'm bound to keep it to #first .

Question:

So, my question would be if I can bring a different div into view - the parent element (which has an id available) of the div I failed to provide the id for as mentioned above on the click of the footer link. Suggestions are welcome as well!

Answer 1

Since you are indicating you have access to jQuery, you can write a script to change them after the fact like

var link1 = $('a[href="http://www.example.com/company.html#first"]');
$(link1).attr('href','http://www.example.com/company.html#mydiv');

That way you will change the url you really want it to point. You'll do something similar for each one of them.

Answer 2

Of interest might be to provide he links in the footer with a fallback URL presented as a data-* attribute. Eg

<a href="www.example.com/company.html#first" data-fallback="www.example.com/company.html#first-parent" title="First">First</a>

In jQuery you could then do something like this (untested):

$("a").click(function(e) {
  if (window.location.hash) {
    // Don't follow the link initially
    e.preventDefault();

    var url = this.href,
      // Borrowed from: http://stackoverflow.com/a/4426201/1150683
      el = $(url.substring(url.indexOf('#') + 1));

    // If element exists
    if (el.length > 0) {
      window.location.href = url;
    } else {
      window.location.href = $(this).data("fallback");
    }
  }
});

Answer 3

So I did solve my own problem but only by hardcoding the url hash available. It's kind of dirty and the script would be called on every page but I think that's what I will use for now. I use $(document).ready() like this:

$(document).ready(function() {
if (location.pathname.split('/')[1] === 'company.html' && $.inArray(location.hash.split('#')[1], ['first', 'second', 'third']) > -1) {
  $('#parent').get(0).scrollIntoView();
}
});