主页 / 问题 / 1062594
Accepted
Frontender
Asked:2020-12-24 20:28:30 +0000 UTC2020-12-24 20:28:30 +0000 UTC

如何进行平滑滚动？[复制]

  • 772

有一个密码生成器站点。在那里，当你按下按钮时，会有一个平滑的滚动。如何做同样的事情？

jquery

1 个回答

  1. Best Answer

    $('#button').on('click', function () {
    $('html, body').animate({
			scrollTop: $('[data-target]').offset().top
		}, 300);
});	
    
    body {
  margin: 0;
  padding: 0;
}

button {
  width: 100%;
  height: 40px;
  line-height: 50px
  display: block;
  background-color: red;
  font-size: 25px;
  margin: 20px 0;
}

.target {
  min-height: 50vh;
  background-color: grey;
}

.target:nth-child(2n) {
  background-color: pink;
}

[data-target] {
  background-color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="button">Клик</button>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target" data-target>Цель</div>
<div class="target"></div>
<div class="target"></div>

    • 1

相关问题