JS/JQuery При нажатий на якорь убрать #link из адресной строки

Question

Сейчас при нажатий на якорную ссылку добавляется сама ссылка в адресную строку, как можно этого избежать т.е адресную строку оставить неизменной?

Answer 1

elem.addEventListener('click',e => e.preventDefault())

e.preventDefault() удаляет стандартное повидение

Answer 2

Как предложил @Armen - делать не стоит, потому что e.preventDefault() отменит и переход к якорю.

Если ссылку на якорь не нужно выводить на текущей странице, при этом выполнять переход к блоку-якорю, то придётся писать "механику" якоря.

Простой переход без анимации:

$('a[href^="#"]').on('click', function(e) { // Если ссылка является якорем, то выполняем следующее:
  let link = $(this).attr('href'), // берём ссылку якоря. Она же по факту id элемента
      el = $(document).find(link); // ищем элемент
  if(el.length > 0) { // если он существует
    el = el.eq(0).offset().top; // берём ПЕРВЫЙ элемент
    $(window).scrollTop(el); // выполняем к нему скролл
  }
  return false; // Отменяем переход по ссылке => и вывод якоря в адресную строку
});

body {
  margin: 0;
}

.fixed-menu {
  position: fixed;
  top: 5px;
  left: 5px;
}

.fixed-menu a {
  color: #000;
}

.test {
  height: 100vh;
}

#blue.test {
  background: blue;
}

#red.test {
  background: red;
}

#green.test {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-menu">
  <a href="#blue">blue</a>
  <a href="#red">red</a>
  <a href="#green">green</a>
</div>

<div id="blue" class="test"></div>
<div id="red" class="test"></div>
<div id="green" class="test"></div>

Вариант с анимацией

$('a[href^="#"]').on('click', function(e) { // Если ссылка является якорем, то выполняем следующее:
  let link = $(this).attr('href'), // берём ссылку якоря. Она же по факту id элемента
      el = $(document).find(link); // ищем элемент
  if(el.length > 0) { // если он существует
    el = el.eq(0).offset().top; // берём ПЕРВЫЙ элемент
    $('html, body').animate({
      scrollTop: el+'px' // выполняем к нему скролл
    }, 1000, 'linear');
  }
  return false; // Отменяем переход по ссылке => и вывод якоря в адресную строку
});

body {
  margin: 0;
}

.fixed-menu {
  position: fixed;
  top: 5px;
  left: 5px;
}

.fixed-menu a {
  color: #000;
}

.test {
  height: 100vh;
}

#blue.test {
  background: blue;
}

#red.test {
  background: red;
}

#green.test {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fixed-menu">
  <a href="#blue">blue</a>
  <a href="#red">red</a>
  <a href="#green">green</a>
</div>

<div id="blue" class="test"></div>
<div id="red" class="test"></div>
<div id="green" class="test"></div>

БЛОГ НА HUSL

JS/JQuery При нажатий на якорь убрать #link из адресной строки

Ответы (2 шт):