scrollTop 問題

javascript scrolltop html html5

nick12345 2022-02-10 12:40:11 ‧ 1154 瀏覽

分享至

我用a href 的方法是可以做到直接跳去One，但沒有慢慢scroll的效果。

我上網只看到scrollTop function，是直接到頂，但有沒有方法可以去到直定的id又可以有scroll的效果??

<a href='#one' data-toggle='tab'>Go to One</a>
<a href='#two' data-toggle='tab'>Go to Two</a>

 <div id="one">One</div>
 .....
 <div id="two">Two</div>
 .....

froce iT邦大師 1 級 ‧ 2022-02-10 13:01:27 檢舉

https://stackoverflow.com/questions/17722497/scroll-smoothly-to-specific-element-on-page

froce iT邦大師 1 級 ‧ 2022-02-10 13:03:05 檢舉

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
這個甚至是原生的api。

F iT邦新手 2 級 ‧ 2022-02-10 14:03:40 檢舉

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

galaxian85

iT邦新手 4 級 ‧ 2022-02-10 13:01:33

scrollTo() 可以傳入參數 behavior: 'smooth'
就可以平滑捲動了 (safari無效)

const slideTo = (id) => {
  const position = document.getElementById(id).offsetTop;
  document.body.scrollTo({
    top: position
    behavior: 'smooth'
  });
}