快捷導(dǎo)航

JavaScript實現(xiàn)平滑滾動效果

更新時間：2024年06月02日 14:10:15 作者：網(wǎng)絡(luò)點點滴

頁面平滑滾動是網(wǎng)頁一種常見的效果,平滑滾動的原理其實很簡單,無非就是讓頁面一種肉眼可見的速度從當(dāng)前位置滾動到指定位置,那如何用原生的JS實現(xiàn)這也效果呢？本文給大家介紹了JavaScript實現(xiàn)平滑滾動效果,需要的朋友可以參考下

● 本次我們將實現(xiàn)點擊按鈕時候，可以平滑得滾動到指定位置

● 首先我們獲取到按鈕信息和想要滾動到得章節(jié)

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

● 下一步就是添加點擊事件了

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
});

getBoundingClientRect()是一個JavaScript方法，用于獲取一個元素相對于視口的位置和尺寸。它返回一個DOMRect對象，包含了元素的top、right、bottom、left、width、height等屬性。

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  console.log(slcoords);
});

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  console.log(slcoords);

  console.log(e.target.getBoundingClientRect());
});

//通過調(diào)用e.target.getBoundingClientRect()，你可以獲取觸發(fā)點擊事件的元素相對于視口的位置和尺寸信息。

● 我們也可以獲得當(dāng)前滾動位置的 X 軸和 Y 軸坐標

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  console.log(slcoords);

  console.log(e.target.getBoundingClientRect());

  console.log('Current scrll (X/Y)', window.scrollX, window.screenY);
});

● 我們也可以輸出輸出視口（viewport）的高度和寬度，也就是可見視口的高度

console.log(
    'height/width viewport',
    document.documentElement.clientHeight,
    document.documentElement.clientWidth
  );

● 現(xiàn)在就簡單了，我們只需要點擊按鈕的時候更改一下我們想要的章節(jié)坐標即可

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  // console.log(slcoords);

  // console.log(e.target.getBoundingClientRect());

  // console.log('Current scrll (X/Y)', window.scrollX, window.screenY);

  // console.log(
  //   'height/width viewport',
  //   document.documentElement.clientHeight,
  //   document.documentElement.clientWidth
  // );

  window.scrollTo(slcoords.left, slcoords.top);
});

● 現(xiàn)在確實可以跳轉(zhuǎn)了，但是細心的小伙伴會發(fā)現(xiàn)，這個必須在頂部才能正常跳轉(zhuǎn)，往下面滑動一點就不行了，因為頁面滑動就會章節(jié)的到頂部的X軸就會變動，我們必須加上滑動的距離才可以

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  // console.log(slcoords);

  // console.log(e.target.getBoundingClientRect());

  // console.log('Current scrll (X/Y)', window.scrollX, window.screenY);

  // console.log(
  //   'height/width viewport',
  //   document.documentElement.clientHeight,
  //   document.documentElement.clientWidth
  // );

  window.scrollTo(
    slcoords.left + window.scrollX,
    slcoords.top + window.scrollY
  );
});

● 現(xiàn)在在任何視口都可以跳轉(zhuǎn)了，但是跳轉(zhuǎn)有點生硬，我們要給他這是平滑滾動

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  // console.log(slcoords);

  // console.log(e.target.getBoundingClientRect());

  // console.log('Current scrll (X/Y)', window.scrollX, window.screenY);

  // console.log(
  //   'height/width viewport',
  //   document.documentElement.clientHeight,
  //   document.documentElement.clientWidth
  // );

  // window.scrollTo(
  //   slcoords.left + window.scrollX,
  //   slcoords.top + window.scrollY
  // );
  window.scrollTo({
    left: slcoords.left + window.scrollX,
    top: slcoords.top + window.scrollY,
    behavior: 'smooth',
  });
});

現(xiàn)在可以實現(xiàn)平滑滾動了，但是上述的操作都是比較老的操作方法了，對于現(xiàn)代瀏覽器，我們有更加現(xiàn)代的方法去實現(xiàn)平滑滾動；

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', function (e) {
  const slcoords = section1.getBoundingClientRect();
  section1.scrollIntoView({ behavior: 'smooth' });
});

這樣就可以更加現(xiàn)代化的實現(xiàn)平滑滾動了，但是可能會存在老的瀏覽器不兼容的問題，但是現(xiàn)代化的實現(xiàn)方法的邏輯也是按照我們上面的步驟來執(zhí)行的！

以上就是JavaScript實現(xiàn)平滑滾動效果的詳細內(nèi)容，更多關(guān)于JavaScript平滑滾動的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: