Как запустить код js после scrollTo?

166

21 января 2019, 04:10

При клике на кнопку нужно проскролить к блоку top-bar и только после этого запустить остальную часть скрипта. Как отследить это событие?

$(".js-btn").on("click", function() { 
  var barPosition = $(".top-bar").offset().top; 
 
  window.scrollTo({ 
    top: barPosition, 
    behavior: "smooth" 
  }); 
  $(".content").text("Scroll"); 
  });

.header { 
  height: 100px; 
  background: #eaeaea; 
} 
 
.top-bar { 
  height: 40px; 
  background: lightblue; 
  display: flex; 
  align-items: center; 
  padding: 0 20px 0; 
} 
 
.content { 
  height: 500px; 
  background: lightcoral; 
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> 
<header class="header"></header> 
<div class="top-bar"> 
  <button type="button" class="btn js-btn">Click</button> 
</div> 
<div class="content"></div>

Answer 1

Есть такая библиотека https://github.com/flesler/jquery.scrollTo и в ней событие onAfter

$(".element").on("click", function () { 
    jQuery.scrollTo('.target',  
    1600,  
    { 
        onAfter:function(){  
            alert("Конец анимации прокрутки"); 
        }  
    }) 
});

section { 
height: 80vh; 
border-bottom: 20px solid orange; 
} 
 
.target { 
height: auto; 
padding: 30px; 
text-align: center; 
background-color: yellow; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script> 
<section><span class="element">Click me</span></section> 
<section></section> 
<section></section> 
<section class="target"> 
Цель 
</section> 
<section></section>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ключи объекта - элементы массива

Возможно ли сделать объект такого вида? Выводится ошибка, что нельзя использовать квадратные скобки в ключах:

296

javascript

Сохранить размер и позицию элемента при изменении родительского элемента в HTML через Javascript

У меня есть элемент в ячейке таблицы, у него в стиле указано width: 100%; height: 100%, я вытаскиваю элемент из таблицы и перемещаю его в bodyПосле этого...

177

javascript

How to make loading of template after ngOnInit. Angular 5

When I am logged in and go to the login I shortly see the login form and then the normal dashboardThe login form should not be visible at all for logged in users when they visit the main page

179

javascript

Как конвертировать pkcs1 в pkcs8 и обратно?

Как конвертировать pkcs1 в pkcs8 и обратно? Либо на javascript, либо на python

190