How to make HTML Anchor link to do 2 different things?

How can I make an anchor do two things,

  1. Bring the user down the same page
  2. Open a new tab to another link.
<a href="http://www.example.com/#test" target="_blank" onclick="window.open('http://www.example.com'); window.open('http://www.example.com');">TEST</a>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can achieve this by having two events in one single element, e.g:

        document.getElementById("test").addEventListener("click",function(){
            window.open('http://www.yahoo.com', '_self');
            window.open('http://www.google.com', '_blank');


        })
<a id="test">click me</a>

So the first link will open in the same page, and the other one will open on a blank new page.

Method 2

you can control your link behaviour by adding listener on it and prevent default action, example:

const link = document.querySelector("a"); // it would be good to add some id to your html anchor tag
const url = "http://www.example.com/#BINANCVIDEO"; // tab url you want to open
    link.addEventListener("click", event => {
      event.preventDefault(); // stop default redirect 
      window.scrollTo(0,document.body.scrollHeight); // scroll user to bottom
      window.open(url, '_blank'); // you can add .focus() to this line if you prefer that
    });


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x