Хочу сделать плавный переход (анимацию) к показываемому блоку. Но знаний пока не хватает.
Удалось добавить якоря на блоки, но происходит резкий переход все равно.
Кто сможет помочь?
<section class="bussines">
<div class="row">
<div class="container">
<div class="bussines_content">
<div class="tabs wow animated animate__fadeInUp" data-wow-duration="2.5s">
<ul class="tabs__caption wow animated animate__shakeX" data-wow-iteration="2" data-wow-delay="3s" data-wow-duration="2.5s">
<li class="active" data-tab-id="strategy"><a class="links" href="#strategy">Стратегия <br>и бизнес-модель</a></li>
<li data-tab-id="process"><a class="links" href="#process">Описание <br>процессов</a></li>
<li data-tab-id="interaction"><a class="links" href="#interaction">Взаимодействие <br>и контроль</a></li>
<li data-tab-id="legal"><a class="links" href="#legal">Юридический <br>фундамент</a></li>
<li data-tab-id="marketing"><a class="links" href="#marketing">Маркетинговая <br>упаковка</a></li>
</ul>
<div data-tab-id="strategy" id="strategy" class="tabs__content active">
<div class="tabs__content-left">
<h3>Стратегия и бизнес-модель</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</div>
<img src="img/slide-1.png" alt="">
</div>
<div data-tab-id="process" id="process" class="tabs__content">
<div class="tabs__content-left">
<h3>Описание процессов</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</div>
<img src="img/slide-2.png" alt="">
</div>
<div data-tab-id="interaction" id="interaction" class="tabs__content">
<div class="tabs__content-left">
<h3>Взаимодействие и контроль</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</div>
<img src="img/slide-3.png" alt="">
</div>
<div data-tab-id="legal" id="legal" class="tabs__content">
<div class="tabs__content-left">
<h3>Юридический фундамент</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</div>
<img src="img/slide-4.png" alt="">
</div>
<div data-tab-id="marketing" id="marketing" class="tabs__content">
<div class="tabs__content-left">
<h3>Маркетинговая упаковка</h3>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</div>
<img src="img/slide-5.png" alt="">
</div>
</div><!-- .tabs-->
</div>
</div>
</div>
</section>
.tabs {
position: relative;
border-top: 1px solid #846a49;
padding-bottom: 100px;
height: auto;
}
.tabs__caption {
max-width: 750px;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
}
.tabs__caption a {
width: 150px;
height: 45px;
color: #363636;
border: 1px solid #846a49;
border-top: none;
border-right: none;
background: #fff;
cursor: pointer;
text-align: center;
padding-top: 7px;
font-size: 14px;
display: inline-block;
}
.tabs__caption a:last-child {
border-right: 1px solid #846a49;
}
.tabs__caption li.active a {
background: #846a49;
color: #fff;
}
.tabs__content {
display: none;
/* по умолчанию прячем все блоки */
}
.tabs__content.active {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding-top: 50px;
}
(function($) {
$(function() {
$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
var $t=$(this);
$t.addClass('active').siblings().removeClass('active')
.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($t.index()).addClass('active').filter('[data-tab-id="'+$t.data('tab-id')+'"]');
ChangeUrl($t.text(),'#'+$t.data('tab-id'));
});
if(location.hash.length)
$('.tabs [data-tab-id="'+location.hash.substr(1)+'"]').click();
});
function ChangeUrl(title, url) {
history.pushState({
Title: title,
Url: url
}, title, url);
}
})(jQuery);
const smoothLinks = document.querySelectorAll('li[data-tab-id^="#"]');
for (let smoothLink of smoothLinks) {
smoothLink.addEventListener('click', function (e) {
e.preventDefault();
const id = smoothLink.getAttribute('data-tab-id');
document.querySelector(id).scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
};
Простой
