使用CSS动画进行上下滑动

<div class="slide"></div>

.slide {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  top: 0;
  transition: top 0.5s ease;
}

.slide-up {
  top: -200px;
}

.slide-down {
  top: 200px;
}

var slideElement = document.querySelector('.slide');

function slideUp() {
  slideElement.classList.add('slide-up');
}

function slideDown() {
  slideElement.classList.add('slide-down');
}

function resetSlide() {
  slideElement.classList.remove('slide-up');
  slideElement.classList.remove('slide-down');
}

<button onclick="slideUp()">向上滑动</button>
<button onclick="slideDown()">向下滑动</button>