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

235
03 мая 2022, 07:30

Такой вот вопрос. да, не стандартный, но интересно, на что способен 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>

READ ALSO
Как вывести строки содержащие слово?
javascript

Как вывести строки содержащие слово?

Как вывести строки которые содержат слово "error"?

 290
Проблема с Date на Node JS
javascript

Проблема с Date на Node JS

При создании экземпляра Date (new Date()), судя по документации, возвращается текущее локальное время, но мне возвращается время со сдвигом на -2 часа

 291
JS проверка на наличие слова в src картинки
javascript

JS проверка на наличие слова в src картинки

Есть html элемент img, в нём есть src='', как проверить src на содержание определённого слова? например слова home

 242
JS как select задать имя не используя option
javascript

JS как select задать имя не используя option

Подскажите пожалуйста, как с помощью js для селекта задать имя из блока div или label

 255