如何使HTML "a"标签过渡延迟？

Question

我想用html "a"元素从一个div移动到另一个div。

p {
min-height: 400vh;
}

<div id="first"><a href="#second">Click me to go to the div with id second</a></div>
<p>Many texts and paragraphs that separate the 2 divs</p>
<div id="second"><a href="#first">Click me to go to the div

通过单击第一个链接，您将进入第二个div，反之亦然。然而，来回移动(过渡)是瞬间发生的，我想知道如何使它更顺利地移动(在过渡中有0.2s延迟)。

我尝试CSS属性"transition"但是没有结果。

Answer 1

这是一个使用JQuery的解决方案:

$("#button").click(function(e) {
e.preventDefault();
$('html').animate({
scrollTop: $("#second").offset().top
}, 3000); //Change Smoothness Here
});

p {
min-height: 400vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first"><a id="button" href="#second">Click me to go to the div with id second</a></div>
<p>Many texts and paragraphs that separate the 2 divs</p>
<div id="second"><a href="#first">Click me to go to the div</a></div>

这基本上阻止了基本的滚动，并使滚动动画持续3秒，直到它到达你想要的div。