How do I temporarily highlight an anchor link?

  • 0
    There is an anchor on one page: & lt; a href = "" id = "one" & gt; Link & lt; / a & gt;
    There is a link on another page: & lt; a href = "url # one" & gt; Link & lt; / a & gt;

    Scrolling to the desired location works. You just need to highlight for 10-15 seconds (replace the background and text color, for example, with the desired one).

    Is there any easy-to-implement solution?

    ps such a question was on Habré (several years ago), but there is not quite what is needed and the solutions are too cumbersome.
    JavaScript Anonymous, May 30, 2020

  • 4 Answers
  • 0
    It's not entirely clear what exactly needs to be highlighted.

    • If the link itself , which needs to be clicked, then either through css animation (transition / keyframes), however, the animation will depend on the presence of a specific state (hover, focus, etc.), or through JS. The essence is the same, however, you can not depend on the state, turn on animation and turn it off by timer. There are also additional options, such as a link click handler.

    • If the target of the link to which it points, then, in general, the options are the same. However, through css, for example, this can be done using the pseudo-class : target htmlbook.com/css/ target , or use js to take the destination of the link, search for this element by id and also add animation.



    An example on : target , that is, if you need to highlight the target of the link:



    #one {
    color: blue;
    background-color: transparent;
    }

    #one:target {
    // и другие параметры анимации - направление, длительность, задержка и тд.
    // в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
    animation: blur 10s ease-in-out ... ;
    }

    @keyframes blur {
    // другие ключевые кадры
    50% {
    color: red;
    background-color: yellow;
    }
    }
    Anonymous

  • 0
    Somehow is this supposed to be?
    Xavier Pacheco

  • 0
    1) css hover + transition to 10s?

    2) Through js, with hover, add a class to the link and after 10 seconds remove this class, the class has animation
    Anonymous

  • 0
    Here's a simple solution to this problem:



    The code should end up on every page where links are supposed to be highlighted on transition:



    window.onload = function () {
    let url = window.location.href.split('#');
    let link_id = url[url.length-1];
    if(document.getElementById(link_id)) {
    document.getElementById(link_id).classList.add('active-link');
    setTimeout( () => document.getElementById(link_id).classList.remove('active-link'), 10000)
    }

    }




    .active-link {
    color: red;
    /*
    тут любые стили активной ссылки и транзишны которые ты хочешь
    */
    }
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!