Support » Developing with WordPress » How to distinguish two links to the same page?

  • michalrama

    (@michalrama)


    Hello,

    I have two links to the same page (with the same url)

    However, for one link, I needed it to jump to a specific position after loading.

    Unfortunately, the way I add the #id element at the end of the url cannot be used. The required element has an id, but it is generated randomly each time the page is loaded, and the template used doesn’t allow you to add an id.

    That’s why I solve it like this:

    jQuery("div ul li").each(function(index){
      if (jQuery(this).text().substring(1,10) == "Běžný den") {
        jQuery(this).parent().parent().get(0).scrollIntoView();
      }  
    });

    It works fine, but for both links, which I didn’t want.

    Would it be possible to distinguish it, please?

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • catacaustic

    (@catacaustic)

    Why does it need to be a unique ID each time?

    If it *must* stay like that, I’d wrap that whole area in another div with it’s own ID that doesn’t change, and use that as the anchor link instead.

    Thread Starter michalrama

    (@michalrama)

    Hello @catacaustic

    Why does it need to be a unique ID each time?

    This is how it works. Each time the page is loaded, a unique id is generated. The problem is that the Page Builder plugin is used to edit pages. And it doesn’t allow elements to add an ID that wouldn’t change.

    However, I have to distinguish the url somehow. It isn’t possible as a classic address, but would it be possible to use parameters that are written at the end of the url?

    Moderator bcworkz

    (@bcworkz)

    You cannot add custom HTML into pages at all??? I could not function with that restriction, but that’s me.

    You could collect all matches into an array, then after the loop completes, scroll to nth array element’s ancestor.

    Your best choices are still to try and wrap that whole section in another element with an ID that doesn’t change, or insert another empty element above it with an ID that doesn’t change and link to that. Remember that you can link to anything, and that can be just before the area that you want to go to and it will still take you to the right place.

    Thread Starter michalrama

    (@michalrama)

    I’m sorry, but I’ve figured it out. At the end of the url, I added /?scroll={0} and modified the code to.

    var url = new URL(window.location.href);
    var scroll = url.searchParams.get("scroll");
    if (scroll != null) {
      jQuery("div ul li").each(function(index){
        if (jQuery(this).text().substring(1,10) == "Běžný den") {
          jQuery(this).parent().parent().get(0).scrollIntoView();
        }  
      });
    }

    Now it works, but there is still the problem that after loading, a menu will appear at the top that will cover part of the div. – see link.

    How should I modify the code to move the div below the menu, please?

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.