Question

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

到目前为止已实现： X秒钟后，我可以使用index.html主页面中的简单脚本滚动到页面的推荐部分，而不会出现任何问题。脚本代码如下。

5秒后自动滚动页面

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

面临的问题：我已经在整个页面上进行了平滑滚动，但是对于计时器在我的页面中进行滚动，我无法使用平滑滚动。不确定的过渡看起来很尴尬，因此，我想使其平滑滚动。另外，我希望这种情况仅在页面加载时首次发生，即，如果在页面中执行了任何操作，则再次访问index.html时不会发生这种情况。

TIA家伙！

Answer 1

{{MEDIA_URL}}

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;
}

在HTML中使用计时器平稳滚动

1 个答案: