主页 / 问题 / 886922
Accepted
E_K
Asked:2020-09-29 17:35:07 +0000 UTC2020-09-29 17:35:07 +0000 UTC

scrollTo之后如何运行js代码？

  • 772

单击按钮时，您需要滚动到该块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>

javascript

1 个回答

  1. Best Answer

    有这样一个库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>

    • 1

相关问题