使用 HTML 中的计时器平滑滚动

Question

概要： 这背后的主要思想是在一定时间后自动平滑滚动到我的 html 的推荐部分。

迄今取得的成绩： 我可以在 X 秒后滚动到页面的推荐部分，在我的主索引.html页面中使用简单的脚本没有任何问题。脚本代码如下。

5秒后自动在页面中滚动

<script>
setTimeout(function(){
window.location.hash = '#testimonials';
},5000);
</script>

面临的问题： 我在整个页面中平滑滚动，但对于页面中的计时器滚动，我无法使用平滑滚动。不确定的过渡看起来很尴尬，因此，我想让它平滑滚动。 另外，我希望这仅在页面加载时第一次发生，即，如果在页面中完成了任何操作，如果再次访问索引.html就不会发生这种情况。

蒂亚伙计们！

Answer 1

function goTo(selector, timeout, cb) {
var $el = $(selector);
if (!$el[0]) return;
var $par = $el.parent();
if ($par.is("body")) $par = $("html, body");
setTimeout(() => {
$par.stop().animate({scrollTop: $el.offset().top}, 1000, cb && cb.call($el[0]));
}, timeout || 0);
}
// USE LIKE:
goTo("#testimonials", 3000, function() {
// You can use `this` to reference #testimonials! yey
$(this).append("<br>Going to #contact in 3sec!");
goTo("#contact", 3000);
});
// Alternatively, without using callbacks you can do
// goTo("#testimonials", 3000);
// goTo("#contact", 6000);
// Reuse function for elements click!
$("[href^='#']").on("click", function(e) {
e.preventDefault();
goTo($(this).attr("href"));
});

/*QuickReset*/
*{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
article {
height: 150vh;
}

<article style="background:#0bf;" id="top">WELCOME (wait 3 sec)</article>
<article style="background:#f0b;" id="about">ABOUT</article>
<article style="background:#b0f;" id="work">OUR WORK</article>
<article style="background:#0fb;" id="testimonials">TESTIMONIALS</article>
<article style="background:#fb0;" id="contact">
CONTACT <a href="#top">TO TOP</a>
</article>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>