链接#id 没有页面更改位置？

Question

如何在 HTML 中使用 #id 链接仅用于更改页面链接栏而不更改页面垂直位置？

http://example.com/#link

Answer 1

# 符号是一个锚点，如果存在与您的链接匹配的命名锚点，页面将在那里“更改垂直位置”。

如果您只想更改地址栏中的 URL，而不使用除 HTML 之外的任何内容，请尝试使用没有匹配链接的锚点：

Like this.

Answer 2

快速示例，因为我现在躺在床上，您可以有一个空 div 并使用内容 div 的 html 填充，这是一个不时尚但快速的示例，您可以隐藏链接的 div 并让脚本循环通过 div 在单击另一个时重新显示它等等，但我现在要睡觉了。夜夜

var links=document.getElementsByTagName('a');

for(var i=0;i<links.length;i++){
  links[i].addEventListener('click',clickFunc);
  
  
  }

function clickFunc(e){
    e.preventDefault();
   var thisId=this.getAttributeNode("data-id").value; 
   var inner=document.getElementById(thisId).innerHTML;
   document.getElementById('mainDiv').innerHTML=inner;
  
  }

menu{position:fixed;top:0px;border:1px solid red;z-index:100;}
div{position:relative;margin-top:50px;}

<menu><a href="#part1" data-id="part1">part 1</a><a href="#part2" data-id="part2">part 2</a><a href="#part3" data-id="part3">part 3</a></menu>
<div id="mainDiv"></div>
<div id="part1"  >part1<br>shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) </div>

<div id="part2">part2<br>part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2)part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2)part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2)</div>


<div id="part3">part3<br>part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3</div>