Скролл до нужного места

Question

Такой вот вопрос. да, не стандартный, но интересно, на что способен JS. Вообщем есть код, чтобы при нажатии, опускался или поднимался до нужного места. (нажимая на пункты). и вот в коде можно поставить время прокрутки, например "1" - мгновенно, а "500" - пол секунды. но проблема в том, что когда до блока 200-500px то это красиво смотрится, а если 3000-5000px, то "матрица какая то" пробегает.

Так вот, можно ли как то реализоваться, чтобы он до определённого блока высчитывал расстояния и от этого выбирал, 1\1000с или 500мс. то есть, если блок не далеко, то плавно к нему подойти, а если блок далеко, то мгновенно.

$(document).ready(function() {
$('a[href*="#"]').on('click', function (e) {
  e.preventDefault();

  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
  }, 500, 'linear');     //500мс
});
});

.section {
  height: 600px;
  background-color: #000;
  color: #fff;
  padding: 30px;
}
.nav__link {
  
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav" id="nav">
<a class="nav__link" href="#s1" data-scroll="">один</a>
<a class="nav__link" href="#s2" data-scroll="">два</a>
<a class="nav__link" href="#s3" data-scroll="">три</a>
<a class="nav__link" href="#s4" data-scroll="">четыре</a>
</nav>


<section class="section" id="s1">1111111</section>

<section class="section" id="s2">2222222</section>

<section class="section" id="s3">3333333</section>

<section class="section" id="s4">4444444</section>

Answer 1

$(document).ready(function() {
$('a[href*="#"]').on('click', function (e) {
  e.preventDefault();
  
  let anchor = $(this).attr('href'),
      anchorOffsetTop = $(anchor).offset().top,
      currentScroll = $(window).scrollTop(),
      scrollDistance = Math.abs(anchorOffsetTop - currentScroll),
      scrollSpeed = scrollDistance > 1200 ? 1 : 500

  $('html, body').animate({
    scrollTop: anchorOffsetTop
  }, scrollSpeed, 'linear');
});
});

.section {
  height: 600px;
  background-color: #000;
  color: #fff;
  padding: 30px;
}
.nav {
  position: sticky;
  top: 0;
  display: flex;
  height: 30px;
  background-color: #f1f1f1;
}
.nav__link {
  padding: 0 10px;
  color: #000;
  text-decoration: none;
  line-height: 30px;
}

.nav__link:hover {
  background-color: #cccccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav" id="nav">
<a class="nav__link" href="#s1" data-scroll="">один</a>
<a class="nav__link" href="#s2" data-scroll="">два</a>
<a class="nav__link" href="#s3" data-scroll="">три</a>
<a class="nav__link" href="#s4" data-scroll="">четыре</a>
</nav>


<section class="section" id="s1">1111111</section>

<section class="section" id="s2">2222222</section>

<section class="section" id="s3">3333333</section>

<section class="section" id="s4">4444444</section>

БЛОГ НА HUSL

Скролл до нужного места

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