With JavaScript, we can prevent hyperlinks from jumping.

The method is as follows:

(1) Operate the href attribute of the hyperlink

Writing a:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <a href="javascript:void(0); > Hyperlink </a> </body> </ HTML >Copy the code

Method 2:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, "> <title>Document</title> </head> <body> <a href="javascript:;" > Hyperlink </a> </body> </ HTML >Copy the code

When you click on a link, the link does not jump.

(2) Block the default behavior of links

Writing a:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial scale=1.0"> <title>Document</title> </head> <body> <a href="https://www.baidu.com" document.querySelector("a"); link.addEventListener('click',function(e){ e.preventDefault(); }) </script> </body> </html>Copy the code

Method 2:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial scale=1.0"> <title>Document</title> </head> <body> <a href="https://www.baidu.com" document.querySelector("a"); link.onclick = function (e) { return false; } </script> </body> </html>Copy the code

At this point, click on the hyperlink, there is no jump.