Link #id without page change location?

Question

How to use #id links in HTML only for change the page link bar without change page vertical location?

Have you looked at this? http://stackoverflow.com/a/3659116/2053389 — RobertAKARobin, Jan 03 '16 at 22:38
Possible duplicate of [How to disable anchor "jump" when loading a page?](http://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page) — Sebastian Simon, Jan 03 '16 at 23:06

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

The # sign is an anchor, and if there exists a named anchor that matches your link, the page will "change vertical location" there.

If you just want to change the URL in the location bar, without using anything except HTML, try using an anchor that doesn't have a matching link:

Like this.

edited May 23 '17 at 11:59

Community

1
1

answered Jan 03 '16 at 22:50

user1717828

7,122
8
34
59

Billy · Answer 2 · 2016-01-09T15:07:34.663

Quick example as I'm lying in bed now, you could have an empty div an populate that with the html of the content div, this is an unstylish but quick example, you could hide the linked div and have the script cycle through the divs to reshow it when another is clicked etc etc but I'm off to sleep now. Night night

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>

Link #id without page change location?

2 Answers2