Question

我的页面上有一个按钮，可滚动回到页面顶部。它可以工作，但是我希望滑动平滑而不是瞬间。有什么好方法吗？

请注意，本网站上存在类似的问题，但都没有使用Vuetify。

这是我的按钮：

BEGIN
SELECT * FROM banka_cariodeme WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM banka_caritahsilat WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM kasa_cariodeme WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM kasa_caritahsilat WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM cek_cariodeme WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM cek_caritahsilat WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM pos_cariodeme WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM pos_caritahsilat WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM senet_cariodeme WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
SELECT * FROM senet_caritahsilat WHERE (vade_tarihi >= p_dt_bas) AND (vade_tarihi <= p_dt_bts) ORDER BY vade_tarihi DESC;
END

这是我的功能：

<v-btn
  class="md-5 mr-3 elevation-21"
  dark
  fab
  button
  right
  color="indigo darken-3"
  fixed
  @click="top"
>

Answer 1

使用behavior选项会在支持该选项的浏览器中触发动画滚动。

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Answer 2

尝试（整页上的打开代码段）

html {
  scroll-behavior: smooth;
}

function scrollme(selector) {
  console.log('xx');
  document.querySelector(selector).scrollIntoView();
  
}

html {
  scroll-behavior: smooth;
}

.d { width: 100px; height: 1000px; background: #eee; }

.d:nth-child(odd) {background: #ddd; height: 100px; }

<div class="d start"></div>
<button onclick="scrollme('.end')">scroll</button>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<button onclick="scrollme('.start')">scroll</button>
<div class="d end"></div>

使用Vuetify缓慢滚动回到顶部

2 个答案: