平滑滚动到按钮中的特定协调对象

时间:2019-02-05 02:44:22

标签: javascript html css

在按钮上单击“我希望它滚动到所需位置”。但是我无法锻炼为什么它不起作用。

function scrollWin() {
  window.scrollTo(0, 890)
  behavior: "smooth"
}
<div class="tp-caption sfb slider tp-resizeme slider"
     style="z-index: 6"
     data-x="center"
     data-hoffset="0"
     data-y="400"
     data-speed="800"
     data-start="1000"
     data-easing="Power4.easeOut"
     data-endspeed="300" data-endeasing="Power1.easeIn"
     data-captionhidden="off">
  <button class="btn btn-info btn-lg btn-large m-r-10"
          onclick="scrollWin()">
          Check out, what we're about…
  </button>
</div>

1 个答案:

答案 0 :(得分:0)

window.scrollTo()默认情况下无法流畅滚动。您必须执行类似this example provided in JSFiddle的操作。

理论是创建一个类似于循环的系统,反复调用一个方法来重现平滑滚动的插图。

请注意,这只是一个非常简单(甚至是愚蠢)的示例代码,以演示如何完成此工作,因此您不应在生产模式下使用此代码。

如果您需要更复杂的系统,更多的配置或对时间,速度和动画类型的更多控制,则应使用Scrull之类的工具或任何平滑的滚动库。