Такой вот вопрос. да, не стандартный, но интересно, на что способен 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>
$(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>
При создании экземпляра Date (new Date()), судя по документации, возвращается текущее локальное время, но мне возвращается время со сдвигом на -2 часа
Есть html элемент img, в нём есть src='', как проверить src на содержание определённого слова? например слова home
Подскажите пожалуйста, как с помощью js для селекта задать имя из блока div или label