По нажатию на кнопку переместить пользователя на определённый блок

Question

Можно сказать якорь, нужно без анимации, просто перемещение, как это записать в jquery.

Answer 1

Простой вариант

$('.btn').on('click', function(){
  let posY = $('.block').offset().top;
  $('html,body').scrollTop(posY);
});

body {
  height: 300vh;
}

.btn {
  display: inline-block;
  color: blue;
  cursor: pointer;
}

.block {
  background: red;
  padding: 20px 0;
  position: relative;
  top: 150vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn">Переместиться к блок</div>
<div class="block">Блок</div>

Универсальный, скажем аналог стандартного якоря.

$('[data-anchor]').on('click', function(){
  let id = $(this).attr('data-anchor');
  if($(document).find('#'+id).length > 0) {
    let posY = $(document).find('#'+id).offset().top;
    $('html,body').scrollTop(posY);
  }
  return false;
});

body {
  height: 300vh;
}

.btn {
  display: inline-block;
  color: blue;
  cursor: pointer;
}

.block {
  background: red;
  padding: 20px 0;
  position: relative;
  top: 150vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn" data-anchor="anchor01">Переместиться к блок</div>
<div class="block" id="anchor01">Блок</div>

Если всё таки нужна анимация, вот вариант с анимацией на "универсальном".

$('[data-anchor]').on('click', function(){
  let id = $(this).attr('data-anchor');
  if($(document).find('#'+id).length > 0) {
    let posY = $(document).find('#'+id).offset().top;
    $('html,body').animate({
      scrollTop: posY
    }, 1000);
  }
  return false;
});

body {
  height: 300vh;
}

.btn {
  display: inline-block;
  color: blue;
  cursor: pointer;
}

.block {
  background: red;
  padding: 20px 0;
  position: relative;
  top: 150vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn" data-anchor="anchor01">Переместиться к блок</div>
<div class="block" id="anchor01">Блок</div>

БЛОГ НА HUSL

По нажатию на кнопку переместить пользователя на определённый блок

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