Как отключить "прыжок" к якорю на странице?

Есть "табы" с якорями, которые отправляются в ссылку. Реализованно, спасибо большое за это пользователю данного форума так:

// Обнаружение ссылки якоря для таба
let url = location.href.split('#')[1], el = $('#'+url);
if(el.length > 0 && el.closest('.tabs-block').length > 0) {
    let parent = el.closest('.tabs-block');
  //
  parent.find('.item.--active').removeClass('--active');
  parent.find('.tabs .item[href="'+url+'"]').addClass('--active');
  parent.find('.content #'+url).addClass('--active');
}

// Переключение табов
$('.tabs-block .tabs').on('click', '.item', function(){
    if(!$(this).hasClass('--active')) {
    let parent = $(this).closest('.tabs-block'),
            id = $(this).attr('href').split('#')[1];
    //
    parent.find('.item.--active').removeClass('--active');
    parent.find('.content #'+id).addClass('--active');
    $(this).addClass('--active');
  }
});
.tabs-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.tabs-block .tabs {
  display: flex;
  flex-direction: column;
  max-width: 325px;
  margin-right: 30px;
}

.tabs-block .tabs .item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  color: #000;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none !important;
  padding-right: 35px;
  box-sizing: border-box;
  opacity: .5;
  transition: all .3s;
  position: relative;
  cursor: pointer;
}

.tabs-block .tabs .item > span:nth-child(1) {
  margin-right: 15px;
}

.tabs-block .tabs .item > span:nth-child(2) {
  transition: inherit;
}

.tabs-block .tabs .item::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  background: url('//mir-architects.ru/html/icons/arrow-link.svg') no-repeat center center / 100% auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: scaleX(-1) translateY(-100%);
  transition: inherit;
}

.tabs-block .tabs .item:hover {
  opacity: 1;
}

.tabs-block .tabs .item:hover > span:nth-child(2) {
  color: #e2bc52;
}

.tabs-block .tabs .item:hover::after {
  background-image: url('//mir-architects.ru/html/icons/arrow-link-hover.svg');
  transform: scaleX(-1) translateY(-100%) translateX(5px);
}

.tabs-block .tabs .item.--active {
  opacity: 1;
}

.tabs-block .tabs .item:not(:last-child) {
  margin-bottom: 33px;
}

.tabs-block .content {
  display: block;
  max-width: 827px;
  width: 100%;
}

.tabs-block .content .item {
  display: none;
}

.tabs-block .content .item.--active {
  display: block;
}

@media (max-width: 900px) {
  .tabs-block .tabs .item:not(:last-child) {
    margin-bottom: 10px;
  }
}

@media (max-width: 700px) {
  .tabs-block {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .tabs-block .tabs {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .tabs-block .content {
    max-width: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-block">
  <div class="tabs">
    <a href="#service1" class="item --active" rel="nofollow">
      <span>01</span>
      <span>Инженерно-геодезические изыскания</span>
    </a>
    <a href="#service2" class="item" rel="nofollow">
      <span>02</span>
      <span>Инженерно-геологические изыскания</span>
    </a>
    <a href="#service3" class="item" rel="nofollow">
      <span>03</span>
      <span>Инженерно-экологические изыскания</span>
    </a>
    <a href="#service4" class="item" rel="nofollow">
      <span>04</span>
      <span>Инженерно-гидрометеорологические изыскания</span>
    </a>
    <a href="#service5" class="item" rel="nofollow">
      <span>05</span>
      <span>Обследование зданий и сооружений</span>
    </a>
    <a href="#service6" class="item" rel="nofollow">
      <span>06</span>
      <span>Прохождение гос. и не гос. экспертизы</span>
    </a>
    <a href="#service7" class="item" rel="nofollow">
      <span>07</span>
      <span>Разработка проектной и рабочей документации</span>
    </a>
    <a href="#service8" class="item" rel="nofollow">
      <span>08</span>
      <span>Согласование проектов во всех заинтересованных инстанциях</span>
    </a>
    <a href="#service9" class="item" rel="nofollow">
      <span>09</span>
      <span>Сбор исходно-разрешительной документации</span>
    </a>
  </div>
  <div class="content">
    <div id="service1" class="item --active">Содержимое 01</div>
    <div id="service2" class="item">Содержимое 02</div>
    <div id="service3" class="item">Содержимое 03</div>
    <div id="service4" class="item">Содержимое 04</div>
    <div id="service5" class="item">Содержимое 05</div>
    <div id="service6" class="item">Содержимое 06</div>
    <div id="service7" class="item">Содержимое 07</div>
    <div id="service8" class="item">Содержимое 08</div>
    <div id="service9" class="item">Содержимое 09</div>
  </div>
</div>

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


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

Автор решения: dmitriy_vlz

Отмени стандартное действие ссылки через event.preventDefault()

// Обнаружение ссылки якоря для таба
let url = location.href.split('#')[1], el = $('#'+url);
if(el.length > 0 && el.closest('.tabs-block').length > 0) {
    let parent = el.closest('.tabs-block');
  //
  parent.find('.item.--active').removeClass('--active');
  parent.find('.tabs .item[href="'+url+'"]').addClass('--active');
  parent.find('.content #'+url).addClass('--active');
}

// Переключение табов
$('.tabs-block .tabs').on('click', '.item', function(e){
    e.preventDefault()
    if(!$(this).hasClass('--active')) {
    let parent = $(this).closest('.tabs-block'),
            id = $(this).attr('href').split('#')[1];
    //
    parent.find('.item.--active').removeClass('--active');
    parent.find('.content #'+id).addClass('--active');
    $(this).addClass('--active');
  }
});
.tabs-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.tabs-block .tabs {
  display: flex;
  flex-direction: column;
  max-width: 325px;
  margin-right: 30px;
}

.tabs-block .tabs .item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  color: #000;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none !important;
  padding-right: 35px;
  box-sizing: border-box;
  opacity: .5;
  transition: all .3s;
  position: relative;
  cursor: pointer;
}

.tabs-block .tabs .item > span:nth-child(1) {
  margin-right: 15px;
}

.tabs-block .tabs .item > span:nth-child(2) {
  transition: inherit;
}

.tabs-block .tabs .item::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  background: url('//mir-architects.ru/html/icons/arrow-link.svg') no-repeat center center / 100% auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: scaleX(-1) translateY(-100%);
  transition: inherit;
}

.tabs-block .tabs .item:hover {
  opacity: 1;
}

.tabs-block .tabs .item:hover > span:nth-child(2) {
  color: #e2bc52;
}

.tabs-block .tabs .item:hover::after {
  background-image: url('//mir-architects.ru/html/icons/arrow-link-hover.svg');
  transform: scaleX(-1) translateY(-100%) translateX(5px);
}

.tabs-block .tabs .item.--active {
  opacity: 1;
}

.tabs-block .tabs .item:not(:last-child) {
  margin-bottom: 33px;
}

.tabs-block .content {
  display: block;
  max-width: 827px;
  width: 100%;
}

.tabs-block .content .item {
  display: none;
}

.tabs-block .content .item.--active {
  display: block;
}

@media (max-width: 900px) {
  .tabs-block .tabs .item:not(:last-child) {
    margin-bottom: 10px;
  }
}

@media (max-width: 700px) {
  .tabs-block {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .tabs-block .tabs {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .tabs-block .content {
    max-width: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-block">
  <div class="tabs">
    <a href="#service1" class="item --active" rel="nofollow">
      <span>01</span>
      <span>Инженерно-геодезические изыскания</span>
    </a>
    <a href="#service2" class="item" rel="nofollow">
      <span>02</span>
      <span>Инженерно-геологические изыскания</span>
    </a>
    <a href="#service3" class="item" rel="nofollow">
      <span>03</span>
      <span>Инженерно-экологические изыскания</span>
    </a>
    <a href="#service4" class="item" rel="nofollow">
      <span>04</span>
      <span>Инженерно-гидрометеорологические изыскания</span>
    </a>
    <a href="#service5" class="item" rel="nofollow">
      <span>05</span>
      <span>Обследование зданий и сооружений</span>
    </a>
    <a href="#service6" class="item" rel="nofollow">
      <span>06</span>
      <span>Прохождение гос. и не гос. экспертизы</span>
    </a>
    <a href="#service7" class="item" rel="nofollow">
      <span>07</span>
      <span>Разработка проектной и рабочей документации</span>
    </a>
    <a href="#service8" class="item" rel="nofollow">
      <span>08</span>
      <span>Согласование проектов во всех заинтересованных инстанциях</span>
    </a>
    <a href="#service9" class="item" rel="nofollow">
      <span>09</span>
      <span>Сбор исходно-разрешительной документации</span>
    </a>
  </div>
  <div class="content">
    <div id="service1" class="item --active">Содержимое 01</div>
    <div id="service2" class="item">Содержимое 02</div>
    <div id="service3" class="item">Содержимое 03</div>
    <div id="service4" class="item">Содержимое 04</div>
    <div id="service5" class="item">Содержимое 05</div>
    <div id="service6" class="item">Содержимое 06</div>
    <div id="service7" class="item">Содержимое 07</div>
    <div id="service8" class="item">Содержимое 08</div>
    <div id="service9" class="item">Содержимое 09</div>
  </div>
</div>

→ Ссылка
Автор решения: CbIPoK2513
// Переключение табов
$('.tabs-block .tabs').on('click', '.item', function(){
    if(!$(this).hasClass('--active')) {
      let parent = $(this).closest('.tabs-block'),
          id = $(this).attr('href').split('#')[1];
      //
      parent.find('.item.--active').removeClass('--active');
      parent.find('.content #'+id).addClass('--active');
      $(this).addClass('--active');
      // Добавляем это
      history.pushState(null, null, '#'+id); // Добавляем в историю ссылку
      return false; // Отменяем переход по стандартной ссылке.
  }
});
→ Ссылка