Search code examples
htmlhref

HTML one href linking to two different pages depending on current page


I have a menu that is static and is the same on all page views. On the main page it should link to bottom of the page (#footer) and when you go to a subpage then it would link to another page. In my case I have a blog on Magento shop and on the front page there are some blog posts at the bottom of the site and when clicked on the main menu it should redirect there. But when user goes to category or product page then it should link to blog directly.

I'm not sure if this is even possible, google didnt help also. If there are any ways I would be happy to see them. Thanks!


Solution

  • Your solution would be like this:

    <a href="#" id="myBtn">Click Me</a> 
    
    <script>
    
    $(document).ready(function(){
    
        $('#myBtn').click(function(){
    
            if(window.location.href == "http:// ...."){ //used to find the current page location 
                location.href = "#abc"; //at the bottom of page
            }
            else{
                location.href = "http:// .... ";//the next page you want to take the user to
            }
    
        });
    
    });
    
    </script> 
    

    Using plain html, any anchor cannot have multiple href locations. But, by making use of JavaScript (I have used jQuery Lib) you can first find the current webpage location and based on it redirect the user on click of hyperlink or button to other locations on your desire.